我有一个简单的react + flask应用程序。我想在用户单击按钮时加载一些数据(~ 10 mb),然后使用这些数据。因为两个不同的组件必须与这些数据交互,我想我会使用redux将数据保存为全局状态。
我基本上有两个组成部分:
1.有一个按钮,调用一个动作从flask服务器加载大数据(并将数据保存到全局redux状态)
1.使用数据(来自全局状态)
一旦我这样做了,我就得到了“SerializableStateInvariantMiddleware花费了509毫秒,超过了32毫秒的警告阈值",这让我觉得这不是正确的方法。
处理这种情况的正确方法是什么?我是否应该保持一个不同的较小状态(这样我就知道“加载数据”按钮被点击了),并从第二个组件读取该状态,然后才将数据加载到私有状态?(检查全局状态是否被更改,如果更改了,调用一个操作并将数据保存到私有状态?)
4条答案
按热度按时间ej83mcc01#
我将通过@phry详细阐述这个精彩的答案。
您可以增加超时时间,而不是配置忽略的路径:
字符串
或者完全关闭检查:
型
来源:https://redux-toolkit.js.org/api/serializabilityMiddleware
kwvwclae2#
不,这很好。只有
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看起来像
字符串
hiz5n14c3#
我在下面的解决方案 checkout 文档中经历了同样的问题,你可以看到我是如何解决的。
字符串
https://www.npmjs.com/package/redux-immutable-state-invarianthttps://redux-toolkit.js.org/api/serializabilityMiddleware的数据库
wj8zmpe14#
这个脚本解决了我的问题
字符串