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

Question

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

我基本上有两个组成部分：

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

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

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

Answer 1

我将详细阐述@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

Answer 2

不，没关系。在开发模式中只有SerializableStateInvariantMiddleware和ImmutableStateInvariantMiddlewareactive 会遍历所有这些以检查所有内容是否可序列化并且没有任何内容被意外修改。

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

请参阅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'] }
  })
})