按需初始化部分 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 一次
从 react-redux 迁移到 redux-toolkit 后使用 configureStore 传递初始状态的最佳方法