按需初始化部分 Redux 存储

Posted 2023-02-22

【中文标题】按需初始化部分 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 如果它们是异步检索的，我会让它们成为一个动作，并在初始化时分派动作，这将使代码更加干净