如何在Reactjs + Reflux应用程序中正确初始化从组件存储?
我有,我有如何在Reactjs + Reflux应用程序中正确初始化从组件存储?
组件
- 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会在默认情况下触发组件的重新创建吗?
编写一个初始化函数,该函数启动一个名为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"));
});
嗯,代码看起来很熟悉;)OP使用Reflux,所以没有调度器。顺便说一句,取决于你的模块加载系统和你如何构建应用程序引导程序,你可能需要也可能不需要完成整个register/waitFor/unregister的事情。幻灯片73中有一个更简单的例子:https:// speakerdeck。com/fisherwebdev/flux-applicative – fisherwebdev 2015-03-19 17:15:18
是的,它来自你的早期评论。找不到确切问题的链接。抱歉。这个问题被修改为指定他正在使用反流。 – Sid 2015-03-20 01:24:43
getInitialState不在每个渲染调用或setState上调用,只有在安装组件时调用getInitialState。你确定每次都不重新创建组件吗? – 2015-03-19 02:25:21
@JeremyD在发出更新事件时,我看到多次调用getInititalState,即使没有明确调用每次重新创建元素。我想知道Reflux是否与此有关。 – ttback 2015-03-19 16:02:23