Redux-ToolkitにFirebaseのTimestampをいれるときのエラー処理

Redux-Toolkitでデータをstateにいれておくときに、firebaseのtimestampフォーマットをそのままいれると”A non-serializable value was detected in the state”のようなエラーがでます。これはTimestampのクラスがそのままでは登録できないためです。

そももそデータをオブジェクトに変換して取り扱えばOKですが、イージーに回避する方法としては、以下を参考にstoreにmiddlewareを追加することです。

Usage Guide | Redux Toolkit

configureStore({
  //...
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['your/action/type'],
      },
    }),
})

問題のあるActionを指定すればOKです。エラー画面に

”Take a look at the reducer(s) handling this action type: XXXX.”

のようにでているとおもいますのでこのXXXXの部分を上記のignoredActionsに指定すればOKです。

なお、以下のブログで紹介されているような、すべてのチェックをオフにするのはおすすめされていません。

How to overcome "A non-serializable value detection"

I'm implementing react app with redux-toolkit, and I get such errors when fetching data from firestore. A non-serializab...

middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),