javascript - React mixin used to add multiple subscribes to component -
i trying use mixin subscribe/ unsubscribe messages in component, have below code, can please tell me if there better way rather push each subscription?
updated: keep getting error, uncaught typeerror: this.subscribetochannel not function
thanks in advance
var icon = require('../partials/icon'); var react = require('react'); var postal = require('postal'); var basketchannel = postal.channel("basket"), basketservice = require('../../services/basketservice'), subscriptionsmixin = require('../mixins/subscriptiontochannelsmixin'); var basketlauncher = react.createclass({ mixins: [subscriptionsmixin], render: function() { return ( <button classname="pull-right" onclick={this.props.handleclick}> <icon type="user" /> {this.getpeoplecount()} people </button> ); }, updatebaskettotal: function() { basketservice.getbaskettotal(function(data){ this.setstate({ selectedpeoplecount: data.totalmembers }); }.bind(this)); }, componentdidmount: function() { var comp = this; comp.updatebaskettotal(); this.subscribetochannel(basketchannel,"selectall",function (data) { basketservice.selectall(data.selectall, function () { comp.updatebaskettotal(); }); }); this.subscriptions.push( basketchannel.subscribe("updatebasketcount", function () { comp.updatebaskettotal(); }) ); this.subscriptions.push( basketchannel.subscribe("removepersonfrombasket", function (data) { basketservice.removeperson(data.personid,function(){ comp.updatebaskettotal(); }); }) ); this.subscriptions.push( basketchannel.subscribe("addpersontobasket", function (data) { basketservice.addperson(data.personid,function(){ comp.updatebaskettotal(); } ); }) ); this.subscriptions.push( basketchannel.subscribe("addarraytobasket", function (data) { basketservice.addperson(data.arraytopush,function(){ comp.updatebaskettotal(); } ); }) ); }, getpeoplecount: function(){ return this.state.selectedpeoplecount; }, getinitialstate: function() { return { subscriptions: [], selectedpeoplecount:0 }; }, componentwillmount: function() { var page = this; } }); module.exports = basketlauncher;
mixin:
var react = require('react'); var postal = require('postal'); var subscriptionsmixin = { getinitialstate: function() { return { subscriptions: [] }; }, componentwillunmount:function() { (i = 0; < this.subscriptions.length; i++) { postal.unsubscribe(this.state.subscriptions[i]); } }, subscribetochannel:function(channel,message,callback){ this.state.subscriptions.push( channel.subscribe(message, callback) ); } };
i wouldn't put native functions in mixin (componentdidmount ...etc). keep functions inside class , put inner function "basketchannel.subscribe" in mixin.
actually put subscribtion object in mixin , attach subscriptions functions prototype.
hope helps
edit: idk if it's source of problem set getinitialstate twice, once in mixin , once in class
Comments
Post a Comment