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

jfewjypa  于 11个月前  发布在  React
关注(0)|答案(4)|浏览(190)

我有一个简单的react + flask应用程序。我想在用户单击按钮时加载一些数据(~ 10 mb),然后使用这些数据。因为两个不同的组件必须与这些数据交互,我想我会使用redux将数据保存为全局状态。
我基本上有两个组成部分:
1.有一个按钮,调用一个动作从flask服务器加载大数据(并将数据保存到全局redux状态)
1.使用数据(来自全局状态)
一旦我这样做了,我就得到了“SerializableStateInvariantMiddleware花费了509毫秒,超过了32毫秒的警告阈值",这让我觉得这不是正确的方法。
处理这种情况的正确方法是什么?我是否应该保持一个不同的较小状态(这样我就知道“加载数据”按钮被点击了),并从第二个组件读取该状态,然后才将数据加载到私有状态?(检查全局状态是否被更改,如果更改了,调用一个操作并将数据保存到私有状态?)

ej83mcc0

ej83mcc01#

我将通过@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

kwvwclae

kwvwclae2#

不,这很好。只有SerializableStateInvariantMiddlewareImmutableStateInvariantMiddleware在开发模式下处于活动状态,它们会检查所有内容是否都是可序列化的,并且没有意外修改任何内容。
对于正常大小的状态,这没有问题,在你的情况下,这是很明显的。但是你可以在存储大数据块的路径上禁用这两个中间件。
参见https://redux-toolkit.js.org/api/getDefaultMiddleware#customizing-the-included-middleware、https://redux-toolkit.js.org/api/immutabilityMiddlewarehttps://redux-toolkit.js.org/api/serializabilityMiddleware
所以你的configureStore看起来像

const store = configureStore({
  // ...
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
    immutableCheck: {

        // Ignore state paths, e.g. state for 'items':
        ignoredPaths: ['items.data']

    },
    serializableCheck: { ignoredPaths: ['some.nested.path'] }
  })
})

字符串

hiz5n14c

hiz5n14c3#

我在下面的解决方案 checkout 文档中经历了同样的问题,你可以看到我是如何解决的。

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-invarianthttps://redux-toolkit.js.org/api/serializabilityMiddleware的数据库

wj8zmpe1

wj8zmpe14#

这个脚本解决了我的问题

const store = configureStore({
        reducer: {cartItems},
        middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
})

字符串

相关问题