Redux - handling really large state object

Question

I have a simple react + flask application. I want to load some data (~10mb) when the user clicks a button, and then use this data. Because two different components have to interact with this data, i thought ill save the data as a global state using redux.

What i basically have is two components:

1. have a button that calls an action to load the large data from the flask server (and save that data into the global redux state)
2. uses the data (from the global state)

Once i did that, i was getting "SerializableStateInvariantMiddleware took 509ms, which is more than the warning threshold of 32ms.", Which made me think this isnt the right way to do so.

What is the right way to handle something like that? Should i keep a different smaller state (so i know the "load data" button was clicked), and read that state from the second component and only then load the data into a private state? (check if the global state was changed and if it did, call an action and save the data in the private state?)

Answer 1

No, that's fine. There are just the SerializableStateInvariantMiddleware and ImmutableStateInvariantMiddleware active in development mode that walk through all of that to check if everything is serializable and nothing was modified by accident.

With normal-sized states that is no problem, in your case it is obviously. But you can just disable these two middlewares for that path where you store that big chunk of data.

See https://redux-toolkit.js.org/api/getDefaultMiddleware#customizing-the-included-middleware, https://redux-toolkit.js.org/api/immutabilityMiddleware and https://redux-toolkit.js.org/api/serializabilityMiddleware

So your configureStore would look like

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

Answer 2

I'll elaborate on the excellent answer by @phry.

Instead of configuring the ignored paths, you could just increase the timeouts:

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

or turn off the checks altogether:

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

Source: https://redux-toolkit.js.org/api/serializabilityMiddleware