redux 툴킷을 사용할 때 "상태에서 직렬화할 수 없는 값이 검출되었습니다"라는 오류가 표시되지만 일반 redux에서는 검출되지 않습니다.

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)

여기저기 살펴본 결과, 커스텀 모델에 문제가 있는 것 같습니다.예를 들어, Varietal 배열은 Varietal 모델에서 작성됩니다.

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 를 사용할 수 있도록, 여기서 정말로 그것이 문제인지 묻고 싶다고 생각하고 있었습니다.

는 더 이 높아요, 하다, 하다, 하다, 일 가능성이 높아요.redux-persistredux-toolkit하지 getDefaultMiddleware

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

flagfalse를 지정하면 각 할 수 .serializableCheck

const customizedMiddleware = getDefaultMiddleware({
  serializableCheck: false
})

한 것에 대하여는, 「 」를 참조해 주세요.redux-toolkit 문서를 참조해 주세요.

[2011/10/07] 편집:

가 발생하는 및 에 대한 내용은 를 하십시오.serializableCheck오류를 수정하려면 "Serializable Data | Usage Guide redx 툴킷 문서 사용"을 참조하십시오.

「하다」는getDefaultMiddleware콜백 폼을 사용하기 위해 내보내기가 권장되지 않습니다.자세한 것은, 장래의 계획:RTK 2.0?·958호 · redxjs / redux-toolkit 및 getDefaultMiddleware는 권장되지 않습니다.·제 1324호 · reduxjs / redux-toolkit를 참조해 주세요.

대체 제품에 대한 자세한 내용은 getDefaultMiddleware | RedxToolkit 문서를 참조하십시오.

import { configureStore } from '@reduxjs/toolkit'

import rootReducer from './reducer'

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

네, 저희는 Redux 사용자에게 직렬화할 수 없는 값을 스토어에 저장해서는 안 된다고 항상 말해왔습니다.Redux Toolkit은 Redux 스토어를 설정할 때 적절한 기본값을 제공하도록 특별히 설계되었으며, 그 일환으로 실수로 데이터를 변환하거나 직렬화 불가능한 값을 포함하지 않도록 하기 위한 체크가 포함되어 있습니다.

클래스 인스턴스는 정의상 완전히 직렬화할 수 없기 때문에 이러한 인스턴스에 문제가 있다고 올바르게 플래그를 붙입니다.그것들을 가게에 넘기지 않도록 당신의 논리를 고쳐주세요.

일반적으로 React 및 Redux 애플리케이션은 일반 JS 개체 및 어레이만 데이터로 사용하여 작성해야 합니다."모델 수업"은 필요 없습니다.

를 사용하여getDefaultMiddleware감가상각, 이것은 다음 방법으로 해결할 수 있습니다.

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

나는 이 문제에 직면했다React Native구현하고 싶을 때redux-persist나란히@reduxjs/toolkit다음 오류가 발생하였습니다.

그리고 다음 코드로 수정했습니다.

import {
  combineReducers,
  configureStore,
  getDefaultMiddleware,
} from '@reduxjs/toolkit';
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist';
import storage from 'utils/storage'; // in fact it is AsyncStorage
import counter from 'reduxStore/reducers';

const persistConfig = {
  key: 'root',
  storage,
};

const reducer = combineReducers({
  counter,
});

const persistedReducer = persistReducer(persistConfig, reducer);

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

export const persistor = persistStore(store);

export default store;

실제로 다음 행이 도움이 됩니다.이 행이 없으면 오류보다 위에 표시됩니다.

middleware: getDefaultMiddleware({
  serializableCheck: {
    ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
  },
}),

이 예에서는 시리얼 가능한 상태 체크 미들웨어를 제외한 링크 설명을 여기에 입력합니다.

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

Redux Persist를 사용하여 설정하는 방법에 대해서는 RTK 문서를 참조하십시오.

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

기본적으로는 다음과 같습니다.

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

configureStore 콜에 있습니다.

또, 다음과 같은 것도 필요합니다.

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

'middleWare' 파라미터와 'serializableCheck: false'를 추가해 문제가 해결되었습니다.(실제로 문제가 되지 않습니다)

소스: 링크

 import { configureStore } from '@reduxjs/toolkit'
    import rootReducer from './reducer'
    import { myCustomApiService } from './api'
    
    const store = configureStore({
      reducer: rootReducer,
      middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
          serializableCheck: false,
        }),
    })

직렬화할 수 없지만 리듀서에 필요한 것이 무엇인지 정확히 알고 있다면 다음과 같은 것이 가장 좋은 옵션이라고 생각합니다.

const store = configureStore({
    reducer: { reducer },
    middleware: getDefaultMiddleware => getDefaultMiddleware({
        serializableCheck: {
            ignoredActions: ['TYPE'],
            ignoredActionPaths: ['property'],
            ignoredPaths: ['reducer.property']
        }
    })
});

액션에서 발생한 오류에 대해서도ignoredActions또는ignoredActionPaths충분합니다.상태에 느려진 오류의 경우 다음을 사용합니다.ignoredPaths에러 메시지를 체크하고, 지정할 필요가 있는 이름을 확인합니다.

@ReFruity와 마찬가지로, 제 문제가 나타난 이유는AbortController거기.

편집: 다음 명령어를 위해AbortController일을 하기 위해 리듀서에 저장해뒀는데signal및 그abort이 방법이 작동하려면 이 작업을 수행해야 했습니다.

let abortMethod = abortController.abort.bind(abortController);

그렇지 않으면 불법 호출에 대한 오류가 발생합니다.

Redux의 핵심 사용 원칙 중 하나는 직렬화할 수 없는 값을 상태 또는 액션에 넣지 않는 것입니다.

그러나 대부분의 규칙과 마찬가지로 예외도 있다.그러나 이러한 경고를 해제해야 하는 경우 특정 작업 유형 또는 작업 및 상태의 필드를 무시하도록 구성하여 미들웨어를 사용자 정의할 수 있습니다.

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

/action/type은 경고 메시지에 표시되는 실제 액션 유형으로 대체해야 합니다.

참고 자료: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data

나도 같은 문제가 있어서 이렇게 해결했다.

middleWare를 추가하여 configureStore에 전달할 수 있습니다.

import { rootReducer } from "./root-reducer";
import { configureStore } from "@reduxjs/toolkit";
import logger from "redux-logger";
const middleWares = [logger];

export const store = configureStore({
  reducer: rootReducer,
  middleware: middleWares,
});

    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),

이러한 플러시 퍼지 등을 redux-furge에서 Import하고 미들웨어를 추가하여 스토어를 구성합니다.이 문제는 해결될 거야!

「 」를 사용하고 axios createAsyncThunk만 됩니다.

createAsyncThunk(
  "post/getPost",
  async ({ id }) => {
    return axios
      .get(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then((res) => res);
  }
);

언급URL : https://stackoverflow.com/questions/61704805/getting-an-error-a-non-serializable-value-was-detected-in-the-state-when-using