Estoy usando Redux Toolkit y quiero almacenar un creador de acciones en el estado. Cuando hago esto, recibo un error con respecto a los valores no serializables en mi acción y en mi estado. Usando el siguiente código como ejemplo de mi problema, ¿cómo puedo resolverlo sin simplemente suprimir la advertencia?
import { ActionCreatorWithoutPayload } from '@reduxjs/toolkit'; export type ModalType = { type: 'MyModal'; actionText: string; onConfirm: ActionCreatorWithoutPayload; } type ui = { modal: ModalType | null; }; const initialState: ui = { modal: null }; export const slice = createSlice({ name: 'ui', initialState: initialState, reducers: { showDialog: (state, action: PayloadAction<ModalType>) => { state.modal= action.payload; }, someAction: (state) => { // do something }, } }); import { someAction } from 'reducers/uiSlice'; <Button onClick={() => dispatch( showDialog({ type: 'MyModal', actionText: `Some text`, onConfirm: someAction} ) )} /> A non-serializable value was detected in an action, in the state: `payload.onConfirm`. Value: ƒ actionCreator() { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } if (prepareAction) { var prepared = prepareAction.apply(void…Para ser honesto, esta es una mala idea, y realmente no es cómo se debe usar Redux.
Según los ejemplos, parece que está intentando crear un modal y pasar una devolución de llamada como accesorio. Hay otras formas de hacer esto que funcionarán mejor con Redux y, de hecho, hace unos años escribí una publicación sobre cómo administrar menús modales y contextuales con Redux . Muestra algunas técnicas diferentes para hacer esto de una manera que sea compatible con la forma en que se debe usar Redux.
Hoy en día, la opción que recomendaría es usar un middleware personalizado que rastrea qué modales están abiertos, devuelve una promesa de dispatch(showModal()) y resuelve la promesa cuando dispatch(closeModal(modalId)) .
La publicación enlaza con https://github.com/AKolodeev/redux-promising-modals como una opción para esto. También tengo una implementación similar incompleta pero en su mayoría funcional en esencia en https://gist.github.com/markerikson/8cd881db21a7d2a2011de9e317007580 que muestra algunos de los posibles enfoques.
Puede deshabilitar el SerializableCheck como a continuación
import {getDefaultMiddleware} from "@reduxjs/toolkit"; const customMiddleWare = getDefaultMiddleware({ serializableCheck: false, }); export default configureStore({ reducer: { ...your reducers }, middleware: customMiddleWare, });