Question

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

部件

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是否会默认触发组件重新创建？

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

在执行根反应组件之前调用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"));
});

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

1 个答案: