[Redux-toolkit](ft. react+ts) serializableStateInvariantMiddleware.ts:194 A non-serializable value was detected in an action,

serializableStateInvariantMiddleware.ts:194 A non-serializable value was detected in an action, in the path: `register`. Value: ƒ register(key) ...

 

redux-persist 사용시 middleware 설정을 해줘야 한다.

 serializableCheck 를 false로 할 수도 있는데, 공식문서에서 다음과 같이 설정해주라고 나와있다.

import { configureStore } from '@reduxjs/toolkit'
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import { PersistGate } from 'redux-persist/integration/react'

import App from './App'
import rootReducer from './reducers'

const persistConfig = {
  key: 'root',
  version: 1,
  storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
})

let persistor = persistStore(store)

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
)

 

https://redux-toolkit.js.org/usage/usage-guide#use-with-redux-persist