Помилка non-serializable value і її виправлення

Під час роботи з persistor може зʼявитися помилка про значення, яке не серіалізується. Приблизно така:

A non-serializable value was detected in an action, in the path: `register`. Value: ƒ register(key) {
    _pStore.dispatch({
      type: _constants__WEBPACK_IMPORTED_MODULE_0__.REGISTER,
      key: key
    });
  } 

Це виникає тому, що actions мають бути серіалізованими до моменту, коли вони фактично досягнуть сховища та передадуться редʼюсеру. І тип actions має бути рядком.

Щоб не бачити цю помилку потрібно дозволити додатку ігнорувати деякі типи actions. Для цього потрібно використати прошарок функціоналу middleware і прописати ігнорування помилок перш ніж оновлювати стейт.

1. Імпортуємо ті компоненти, тип яких будемо ігнорувати

store.js

import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'

1. У store після редʼюсерів прописуємо middleware за прикладом нижче

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

Після цього помилка в консолі зникне.

Посилання:

Чому action має бути рядком

Виправлення помилки не серіалізованих даних

Що таке middleware в Redux