CODEWITHSUNDEEP
reactjsredux
tamirg
tamirg

Reputation: 795

Redux - handling really large state object

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?)

Upvotes: 40

Views: 41676

Answers (4)

Juuso Ohtonen
Juuso Ohtonen

Reputation: 9662

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,
  })
})

Sources:

Upvotes: 60

João Jamba
João Jamba

Reputation: 111

this script solved my problem

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

Upvotes: 1

phry
phry

Reputation: 44096

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: {

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

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

Upvotes: 31

Mahmoud Ahmed
Mahmoud Ahmed

Reputation: 29

i went through the same issue down below solution check out documentation and you can see how i solved

    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

Upvotes: 3

Related Questions