☰

Reduxツールキットを使用すると「状態でシリアル化できない値が検出されました」というエラーが発生しますが、通常のReduxでは発生しません。質問する

tag-icon • tag-icon javascript reactjs redux react-redux redux-toolkit
Reduxツールキットを使用すると「状態でシリアル化できない値が検出されました」というエラーが発生しますが、通常のReduxでは発生しません。質問する

構築中のアプリを Redux Toolkit を使用するように切り替えようとしているのですが、createStore から configureStore に切り替えるとすぐに次のエラーが発生することに気付きました。

A non-serializable value was detected in the state, in the path: `varietals.red.0`. Value:, Varietal {
  "color": "red",
  "id": "2ada6486-b0b5-520e-b6ac-b91da6f1b901",
  "isCommon": true,
  "isSelected": false,
  "varietal": "bordeaux blend",
}, 
Take a look at the reducer(s) handling this action type: TOGGLE_VARIETAL.
(See https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state)

いろいろ調べてみると、問題はカスタム モデルにあるようだということがわかりました。たとえば、varietals 配列は varietals モデルから作成されます。

class Varietal {
  constructor(id, color, varietal, isSelected, isCommon) {
  this.id = id;
  this.color = color;
  this.varietal = varietal;
  this.isSelected = isSelected;
  this.isCommon = isCommon;
 }
}

そして、それを使用して文字列の配列をマップし、状態に入る Varietal 配列を作成します。

// my utility function for creating the array
const createVarietalArray = (arr, color, isCommon) =>
  arr.map(v => new Varietal(uuidv5(v, NAMESPACE), color, v, false, isCommon));';

// my array of strings
import redVarietals from '../constants/varietals/red';

// the final array to be exported and used in my state
export const COMMON_RED = createVarietalArray(redVarietals.common.sort(), 'red', true);

モデルを切り替えて、配列作成ユーティリティを次のようなオブジェクトの単純な配列を返すものに置き換えたとき:

export const createVarietalArray = (arr, color, isCommon) =>
  arr.map(v => ({
    id: uuidv5(v, NAMESPACE),
    color,
    varietal: v,
    isSelected: false,
    isCommon,
  }));

その後、その特定のリデューサーのエラーは解消されましたが、アプリ全体にこれらのカスタム モデルがあり、Redux Toolkit を使用できるようにするためにそれらをすべて削除して再コーディングする前に、それを実行する前に、それが本当に問題であるかどうかをここで尋ねたかったのです...

ベストアンサー1

これはおそらく、 の問題ですredux-persist。redux-toolkitにはデフォルトのミドルウェアがほとんど提供されていません。getDefaultMiddleware

import { getDefaultMiddleware } from '@reduxjs/toolkit';

偽のフラグを設定することで各ミドルウェアを無効にすることができます。serializableCheck

const customizedMiddleware = getDefaultMiddleware({
  serializableCheck: false
})

詳細についてはredux-toolkit ドキュメンテーション。

[2021/10/07] 編集:

serializableCheckこのエラーが発生する理由と、 falseに設定するとなぜ修正されるのかについて詳しくは、以下をお読みください。シリアル化できないデータの操作 | 使用ガイドredux ツールキットのドキュメント。

さらに、getDefaultMiddlewareエクスポートは廃止され、コールバックフォームの使用が推奨されています。今後の計画: RTK 2.0? · 問題 #958 · reduxjs/redux-toolkitそしてgetDefaultMiddleware は非推奨です · 問題 #1324 · reduxjs/redux-toolkit理由について詳しく知るには。

何が置き換えられるのかについては、getDefaultMiddleware | Redux ツールキット詳細についてはドキュメントをご覧ください:

import { configureStore } from '@reduxjs/toolkit'

import rootReducer from './reducer'

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
})

おすすめ記事