React mixin used to add multiple subscribes to component

Question

I am trying to use a mixin to subscribe/ unsubscribe to messages in my component, I have the below code, can anyone please tell me if there is a better way to do this rather than a push for each subscription?

UPDATED: keep getting error, Uncaught TypeError: this.subscribeToChannel is not a 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() {
    for (i = 0; i < this.subscriptions.length; i++) {
        postal.unsubscribe(this.state.subscriptions[i]);
    }
},

subscribeToChannel:function(channel,message,callback){
    this.state.subscriptions.push(
        channel.subscribe(message, callback)
    );
}
};

score 3 · Answer 1 · answered Jul 30 '15 at 14:19

3

It looks like your mixin is missing the export line

module.exports = subscriptionsMixin;

answered Jul 30 '15 at 14:19

Ed Ballot

3,405
1
17
24

François Richard · Accepted Answer · 2015-07-30T11:10:17.047

2

I wouldn't put native functions in a mixin (componentDidMount ...etc). Keep those functions inside your class and put inner function like "basketChannel.subscribe" in the mixin.

Actually I would put the subscribtion object in the mixin itself and would attach the subscriptions functions as prototype.

Hope it helps

Edit: Idk if it's the source of your problem but you set getInitialState twice, once in your mixin and once in your class

edited Jul 30 '15 at 11:10

answered Jul 30 '15 at 10:43

François Richard

6,817
10
43
78

Thanks I've managed to get something setup and updated my post, any ideas why I get the error? – Bomber Jul 30 '15 at 11:01

React mixin used to add multiple subscribes to component

2 Answers2