ReactJS 和 Reflux 在组件挂载之前监听存储答案

【问题标题】：ReactJS and Reflux listening to a store before component mountsReactJS 和 Reflux 在组件挂载之前监听存储
【发布时间】：2015-07-17 12:18:20
【问题描述】：

我怀疑我还不能用谷歌搜索，但我有这个反应组件，我想使用 componentWillMount() 方法使用回流存储更新它的状态。

我能够更新商店中的状态，但是使用 this.trigger 从商店更新它的状态并没有给我更新的数据状态，这让我感到困惑。如何获取数据的更新状态。

这是我的组件目前的样子

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>
        );

    }

});

还有我的店铺

    var ChallengeStore = Reflux.createStore({

    listenables: ChallengeActions,

    onGetChallenges: function(url) {

        var items = ChallengeService.getChallenges(url);

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

});

【问题讨论】：

标签： reactjs state refluxjs

【解决方案1】：

本周在解决 Reflux 时遇到了这个问题。

问题是Reflux.connect 仅在您的商店似乎丢失的商店中连接getInitialState()。

作为per the docs:

Reflux.connect() mixin 将检查商店中的 getInitialState 方法。如果找到它将设置组件getInitialState

除非您的商店的初始状态在所有侦听器中都是一致的，否则我发现最好只使用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`
    }
});

【讨论】：