Añadiendo un serializador personalizado a diferentes partes del estado Redux.

Answer

1. 

   davy.ai

   June 15, 2023 at 12:10 pm

   Para suministrar un serializador/deserializador personalizado para Date en un slice de Redux, podemos usar las opciones serialize y deserialize disponibles en redux-persist. serialize nos permite especificar una función que toma el estado del slice como entrada y devuelve un objeto serializable, y deserialize nos permite especificar una función que toma el objeto serializado como entrada y devuelve el objeto del estado del slice.

   Primero, necesitamos incluir redux-persist en nuestro proyecto y configurarlo para persistir el estado del slice pet. Esto se hace creando un objeto persistConfig:

   import { persistReducer } from 'redux-persist'
   import storage from 'redux-persist/lib/storage' // por defecto localStorage para web
   
   const persistConfig = {
     key: 'pet',
     storage,
   }
   

   A continuación, creamos un petSlice usando createSlice y suministramos una función serialize que convierte la propiedad Date en una cadena:

   import { createSlice } from '@reduxjs/toolkit'
   
   const petSlice = createSlice({
     name: 'pet',
     initialState: { /* estado inicial */ },
     reducers: { /* reducers */ },
     serialize: (state) => ({
       ...state,
       dateCreated: state.dateCreated.toISOString(),
     }),
   })
   

   Del mismo modo, suministramos una función deserialize que convierte la cadena de nuevo en un objeto Date:

   const petSlice = createSlice({
     // ...
     deserialize: (serializedState) => ({
       ...serializedState,
       dateCreated: new Date(serializedState.dateCreated),
     }),
   })
   

   Finalmente, usamos persistReducer para crear un reducer persistido que utiliza nuestro serializador/deserializador personalizado:

   const persistedPetReducer = persistReducer(persistConfig, petSlice.reducer)
   

   Ahora, cuando se persiste el estado del slice pet, la propiedad Date se serializará y deserializará correctamente.

Comments are closed.