首页 文章

如何在Reactjs Reflux应用程序中正确初始化Store from Component？

提问于
浏览 次
1

我有一个简单的导航栏用例

组件

  • NavBar.jsx

  • NavBarItem.jsx

商店

  • NavStore.js

使用依赖项

  • 反应

  • 回流

我会像导航栏一样渲染

<NavBar active={itemName} itemList={itemList} />

问题是我的初始状态是{}，我的NavStore也是如此，因为没有涉及外部数据，我应该如何使用itemList信息初始化NavStore.js？

我尝试在Store上添加一个helper方法，比如initializeData（data），并在NavBar Component的render或getInitialState（）中调用它，它总是在Component上的this.setState（）和初始值重新初始化的商店之后被调用 . 不确定为什么总是在this.setState（）上调用getInitialState（） .

我也使用Reflux作为动作调度程序，但我看到每个动作都调用了getInitialState（） . 这看起来有点奇怪 . Reflux是否会默认触发组件重新创建？

reactjs reactjs-flux flux refluxjs

1 回答

  • 1

    编写一个初始化函数，该函数启动一个名为INITIALIZE_APP的操作，并让必要的存储在接收此操作时执行初始化 . 等待所有商店完成初始化，然后再渲染根反应组件 .

    //initialize.js
var initialize = function() {
    var dispatchToken = AppDispatcher.register(payload => {
        var action = payload.action;

        if (action.type !== AppConstants.ActionTypes.INITIALIZE_APP) {
            return;
        }
        //  wait    for all the stores  to  initialize  before rendering
        var tokens = [
            CustomerStore,
            NavigationStore,
        ].map(store => store.dispatchToken);

        AppDispatcher.waitFor(tokens);
        AppDispatcher.unregister(dispatchToken);
    });

    InitializeAppActions.initialize(); //   Creates INITIAL_LOAD    action
};

module.exports = initialize;

    为INITALIZE_APP定义了一个操作

    // InitializeAppActions.js
var InitializeAppActions = {
  initialize() {
    AppDispatcher.handleViewAction({
      type: ActionTypes.INITIALIZE_APP,
    });
    return true;
  },

};

module.exports = InitializeAppActions;

    商店侦听INITIALIZE_APP操作

    //CustomerStore.js
CustomerStore.dispatchToken = AppDispatcher.register(function(payload)   {
  var action = payload.action;
  switch (action.type) {

    //Called when the app is started or reloaded
    case ActionTypes.INITIALIZE_APP:
        initializeCustomerData();
        break;
}

    在执行根反应组件之前调用initialize函数 .

    //app.js
var initialize = require("./initialize.js");


//initialize the stores before rendering
initialize();

Router
.create({
  routes: AppRoutes,
})
.run(function(Handler) {
  React.render( <Handler/>, document.getElementById("react-app"));
});
    回复于

相关问题