1

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

成分

  • 导航栏.jsx
  • 导航栏项目.jsx

专卖店

  • 导航商店.js

使用依赖项

  • 反应
  • 回流

我会像这样渲染导航栏 

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

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

我尝试在 Store 上添加一个辅助方法，如 initializeData(data)，并在 NavBar 组件的渲染或 getInitialState() 中调用它，它总是在组件上的 this.setState() 之后被调用，并使用初始值重新初始化存储。不知道为什么 getInitialState() 总是在 this.setState() 上被调用。

我也使用 Reflux 作为动作调度程序，但我看到每个动作都调用了 getInitialState()。似乎有点奇怪。Reflux 默认会触发组件的重新创建吗？

4

1 回答 1

1

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

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

为 INITALZE_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;
}

在执行根 react 组件之前调用初始化函数。

//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"));
});
于 2015-03-19T03:45:40.743 回答