Redux - 处理非常大的状态对象

Posted 2023-02-19

【中文标题】Redux - 处理非常大的状态对象

【英文标题】：Redux - handling really large state object

【发布时间】：2021-03-20 21:21:04

【问题描述】：

我有一个简单的 react + flask 应用程序。 我想在用户单击按钮时加载一些数据（~10mb），然后使用这些数据。 因为两个不同的组件必须与这些数据交互，所以我认为使用 redux 将数据保存为全局状态。

我基本上有两个组件：

有一个按钮，可以调用一个动作来从烧瓶服务器加载大数据（并将该数据保存到全局 redux 状态） 使用数据（来自全局状态）

一旦我这样做了，我得到“SerializableStateInvariantMiddleware 花费了 509 毫秒，超过了 32 毫秒的警告阈值。”，这让我觉得这不是正确的做法。

处理此类事情的正确方法是什么？ 我是否应该保持不同的较小状态（所以我知道单击了“加载数据”按钮），并从第二个组件读取该状态，然后才将数据加载到私有状态？ （检查全局状态是否改变，如果改变了，调用一个动作并将数据保存在私有状态？）

【问题讨论】：

使用lazy loading或Vitualized Data

【参考方案1】：

不，没关系。 只有SerializableStateInvariantMiddleware 和ImmutableStateInvariantMiddleware 在开发模式下处于活动状态，它们会遍历所有这些以检查所有内容是否可序列化，并且没有任何内容被意外修改。

正常大小的状态没问题，在你的情况下显然是这样。但是您可以在存储大量数据的路径中禁用这两个中间件。

见https://redux-toolkit.js.org/api/getDefaultMiddleware#customizing-the-included-middleware、https://redux-toolkit.js.org/api/immutabilityMiddleware和https://redux-toolkit.js.org/api/serializabilityMiddleware

所以你的 configureStore 看起来像

const store = configureStore(
  // ...
  middleware: (getDefaultMiddleware) => getDefaultMiddleware(
    immutableCheck:  ignoredPaths: ['some.nested.path'] ,
    serializableCheck:  ignoredPaths: ['some.nested.path'] 
  )
)

【讨论】：

谢谢！只是一个小问题，数据存储在redux全局状态中，那么我怎么知道这些数据的实际路径是什么？

在不知道该路径的情况下如何使其脱离全局状态？

【参考方案2】：

我将详细说明@phry 的出色回答。

您可以增加超时时间，而不是配置忽略的路径：

const store = configureStore(
  // ...
  middleware: (getDefaultMiddleware) => getDefaultMiddleware(
    immutableCheck:  warnAfter: 128 ,
    serializableCheck:  warnAfter: 128 ,
  )
)

或完全关闭检查：

const store = configureStore(
  // ...
  middleware: (getDefaultMiddleware) => getDefaultMiddleware(
    immutableCheck: false,
    serializableCheck: false,
  )
)

来源：https://redux-toolkit.js.org/api/serializabilityMiddleware

【参考方案3】：

我在解决方案检查文档下面遇到了同样的问题，你可以看到我是如何解决的

    export const store = configureStore(
      reducer: 
        // Add the generated reducer as a specific top-level slice
        [MusicApi.reducerPath]: MusicApi.reducer,
      ,
      // Adding the api middleware enables caching, invalidation, polling,
      // and other useful features of `rtk-query`.
      middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware(
          immutableCheck: false,
          serializableCheck: false,
        ).concat(MusicApi.middleware),
    );

https://www.npmjs.com/package/redux-immutable-state-invariant https://redux-toolkit.js.org/api/serializabilityMiddleware

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。