按需初始化部分 Redux 存储

Posted

技术标签:

【中文标题】按需初始化部分 Redux 存储【英文标题】:Initialize part of Redux store on demand 【发布时间】:2016-11-09 03:24:17 【问题描述】:

我正在将基于 Reflux 的应用程序迁移到 Redux 并遇到了一个问题。我在应用程序中有很多商店(这对 Reflux 来说是一件好事或坏事),其中一些仅在某个页面尝试使用商店时才被初始化。基本上,存储初始化发生,然后连接到存储的组件即将挂载。初始化商店时,我实际上是异步加载数据。

为了说明当前行为: 假设我有 5 个页面和 5 个商店,其中每个页面使用一个商店。仅当用户导航到相应页面时才加载初始存储状态的数据。因此,在初始应用程序加载时,我只为 store1 加载数据,并且只有当用户导航到 page2 时,我才会为 store2 加载数据。

现在,我将我的 Reflux 存储替换为单个 Redux 存储,该存储由 5 个部分组成,并且我计划为每个部分实施减速器。如果要与一个reducer(page1 -> reducer1、page2->reducer2 等)关联,则每个页面。根据我对 Redux 应该如何工作的理解,store 的每个部分都将由各自的 reducer 初始化,这一切都将在 store 初始化时发生。在实际的应用程序中,我有 50 个存储,我假设它会在应用程序初始化时立即导致 50 个 API 调用,这一点都不好。初始页面并不需要所有这些数据。

因此我的问题:有没有办法在 Redux 中按需加载初始存储状态?或者如何接近?

我了解,我可以在导航到页面之前触发一个操作以将数据加载到商店中,但实际上,页面连接到多个商店部分,并且很难弄清楚我需要调用哪些操作(尽管有可能的)。

here 提出了类似的问题,但我的问题更多关于如何在初始化时不加载所有内容。

【问题讨论】:

【参考方案1】:

是的,你可以。

当你创建你的 reducer 时,给 state 参数一个默认值是个好主意,这样当它永远不会未定义时。

当您第一次初始化您的商店时,您有机会传递一个initialState 对象。所以你可以这样做:

let initialState;
if (yourDemand)  // load the intialState on 'yourDemand'
  initialState = 
    page1: intial state for page1Reducer
    page2: intial state for page2Reducer
    page3: intial state for page3Reducer
  


const store = createStore(
  reducers,
  initialState
);

【讨论】:

如果我需要做ajax调用来获取初始状态,这会同时产生3个调用,是吗? @MikhailChibel 如果它们是异步检索的,我会让它们成为一个动作,并在初始化时分派动作,这将使代码更加干净

以上是关于按需初始化部分 Redux 存储的主要内容,如果未能解决你的问题,请参考以下文章

在 react-native-debugger 中配置 redux 存储的初始状态?

仅按需从 TThread 动态初始化和调用 LoadLibrary 一次

使用 redux 初始化全局状态,然后让本地组件状态接管

从 react-redux 迁移到 redux-toolkit 后使用 configureStore 传递初始状态的最佳方法

React/Redux 服务端渲染初始状态

在同构 Redux 应用程序中在哪里设置 cookie?