如何在Reactjs + Reflux应用程序中正确初始化从组件存储？

Question

我有，我有

组件

• NavBar.jsx
• NavBarItem.jsx

商店一个简单的导航栏使用情况

• NavStore.js

使用依赖

• 阵营
• 回流

我喜欢渲染

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

问题导航栏是我的初始状态{}，所以我NavStore ，因为没有涉及外部数据，我应该如何使用itemList信息初始化NavStore.js？我尝试在Store上添加一个helper方法，如initializeData（data），并在NavBar Component的render或getInitialState（）中调用它，它总是在组件上调用this.setState（）之后调用，并重新初始化存储初始值。不知道为什么getInitialState（）总是在this.setState（）上被调用。

我也使用Reflux作为动作调度器，但我看到每个动作调用getInitialState（）。这似乎有点奇怪。 Reflux会在默认情况下触发组件的重新创建吗？

Answer 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; 
} 

呼叫之前执行根反应组分初始化功能。

//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")); 
});