CODEWITHSUNDEEP
reactjsstaterefluxjs
Bazinga777
Bazinga777

Reputation: 5281

ReactJS and Reflux listening to a store before component mounts

I have this doubt that I haven't been able to google out yet but I have this react component that I want to update it's state using a reflux store using componentWillMount() method.

I am able to update the state in the store but using this.trigger to update it's state from the store didn't give me the updated state of the data which got me confused. How can I get the updated state of the data.

Here is what my component is like at the moment 

var Challenges = React.createClass({

    contextTypes: {

            router: React.PropTypes.func
    },

    mixins: [Reflux.connect(ChallengeStore,'challenges')],

    getInitialState: function() {
        return {
            challenges: []
        }
    }

    componentDidMount: function() {

            var trackId = this.props.params.trackId; // the url

            ChallengeActions.GetChallenges(trackId);

            console.log(this.state);

    },

    render: function () {

        return(
               <div>
                        <h1>{ this.state.challenges.title }</h1>                                    <List challenges={ this.state.challenges } />
            </div>
        );

    }

});

And my store here 

    var ChallengeStore = Reflux.createStore({

    listenables: ChallengeActions,

    onGetChallenges: function(url) {

        var items = ChallengeService.getChallenges(url);

        this.trigger({
            challenges: items
        });
    }

});

Upvotes: 2

Views: 2856

Answers (1)

zulkamal
zulkamal

Reputation: 578

Ran into this while figuring out Reflux this week.

The issue is Reflux.connect only connects a getInitialState() in the store which your store seems is missing.

As per the docs:

The Reflux.connect() mixin will check the store for a getInitialState method. If found it will set the components getInitialState

Unless your store's initial state is consistent across all it's listeners, I find it's better to just use Reflux.listenTo():

var Status = React.createClass({
    mixins: [Reflux.listenTo(statusStore,"onStatusChange")],
    onStatusChange: function(status) {
        this.setState({
            currentStatus: status
        });
    },
    render: function() {
        // render using `this.state.currentStatus`
    }
});

Upvotes: 3

Related Questions