按需初始化Redux商店的一部分

Question

我将基于Reflux的应用程序迁移到Redux并遇到了一个问题。我在应用程序中有很多商店（这是关于Reflux的好或坏），并且只有当某个页面试图使用商店时才会初始化它们中的一些。基本上，商店初始化发生，然后连接到商店的组件即将安装。初始化存储时，我实际上是异步加载数据。

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

现在，我用一个Redux商店替换我的Reflux商店，该商店由5个零件组成，我计划为每个零件实施减速器。每个页面如果要与reducer相关联（page1 - ＆gt; reducer1，page2-＆gt; reducer2等）。根据我对Redux应该如何工作的理解，商店的每个部分都将由相应的reducer初始化，这一切都将在商店初始化时发生。在实际的应用程序中，我有50个商店，我认为它会在应用程序初始化时立即导致50个API调用，这根本不是很好。并非所有数据都是初始页面所必需的。

因此我的问题：有没有办法在Redux中按需加载初始存储状态？或者怎么能接近它？

据我所知，我可以在导航到页面之前触发将数据加载到商店中的操作，但实际上，连接到多个商店部分的页面并不容易弄清楚我需要调用哪些操作（尽管有可能的）。

类似的问题已被问到here，但我的问题更多是关于如何在初始化时不加载所有内容。

Answer 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
);