我有一个简单的 react + flask 应用程序。 我想在用户单击按钮时加载一些数据（~10mb），然后使用这些数据。 因为两个不同的组件必须与这些数据交互，所以我认为使用 redux 将数据保存为全局状态。
我基本上有两个组件：
一旦我这样做了，我得到“SerializableStateInvariantMiddleware 花费了 509 毫秒，超过了 32 毫秒的警告阈值。”，这让我觉得这不是正确的做法。
处理此类事情的正确方法是什么？ 我是否应该保持不同的较小状态（所以我知道单击了“加载数据”按钮），并从第二个组件读取该状态，然后才将数据加载到私有状态？ （检查全局状态是否改变，如果改变了，调用一个动作并将数据保存在私有状态？）
【问题讨论】：
lazy loading或Vitualized Data
不，没关系。
只有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'] }
})
})
【讨论】：
我将详细说明@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
【讨论】：
我在解决方案检查文档下面遇到了同样的问题，你可以看到我是如何解决的
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
【讨论】：