如何从 Reactjs+Reflux 应用程序中的组件正确初始化 Store？

Posted 2023-02-22

【中文标题】如何从 Reactjs+Reflux 应用程序中的组件正确初始化 Store？

【英文标题】：How to properly initialize Store from Component in a Reactjs+Reflux app?

【发布时间】：2015-05-21 21:15:22

【问题描述】：

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

组件

NavBar.jsx NavBarItem.jsx

商店

NavStore.js

使用依赖项

反应 回流

我会像

那样渲染导航栏

<NavBar active=itemName itemList=itemList />

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

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

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

【问题讨论】：

getInitialState 不会在每次渲染调用或 setState 时调用，它仅在组件挂载时调用一次。您确定不是每次都重新创建组件吗？

@JeremyD 我在发送更新事件时看到多次调用 getInitialState，即使每次都没有明确调用重新创建元素。我想知道回流是否与此有关。

【参考方案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"));
);

【讨论】：

嗯，代码看起来很熟悉 ;) OP 正在使用 Reflux，因此没有调度程序。顺便说一句，根据您的模块加载系统以及您构建应用程序引导程序的方式，您可能需要也可能不需要执行整个注册/等待/注销操作。幻灯片 73 上有一个更简单的示例：speakerdeck.com/fisherwebdev/flux-applicative

是的，它来自您之前的评论。找不到指向确切问题的链接。对不起。修改了问题以指定他正在使用反流。