Search code examples
reactjsreduxredux-toolkitsanitize

How to sanitize data in redux toolkit with typescript?

I got this error on my console when I tried to get the server data. enter image description here

react_devtools_backend.js:3973 Application state or actions payloads are too large making Redux DevTools serialization slow and consuming a lot of memory. See https://git.io/fpcP5 on how to configure it.

I understand that I need to set up the store again, but can I set up sanitize with the configureStore? or should I use createStore and install redux-devtools-extension?

This is my store setup code

export const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
            serializableCheck: {
                ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
                warnAfter: 128,
            },
            immutableCheck: false,
        }),
    devTools: process.env.NODE_ENV !== "production",
});

export type RootState = ReturnType<typeof appReducer>;
export type AppDispatch = typeof store.dispatch;
Solution

  • You can pass all the devtools options into configureStore:

    export const store = configureStore({
    // ...
    devTools: { 
      // options as if you were setting it up by hand
      // https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#windowdevtoolsextensionconfig
      stateSanitizer: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
    }
});