Estoy trabajando en una aplicación que usa redux para la gestión del estado. Allí, en alguna condición, quiero actualizar el estado.
Mi estado inicial y la función reductora se ve así:
import { createSlice } from '@reduxjs/toolkit'; const filterDataTemplate = { programId: '', year: '', }; const initialState = { //some other state filterData: { ...filterDataTemplate }, }; const slice = createSlice({ name: 'editFilterSlice', initialState: initialState, reducers: { updateFilterProgramId: (state, action) => { state.filterData.programId = action.payload; }, updateFilterYear: (state, action) => { state.filterData.year = action.payload; }, }, }); export const { updateFilterYear, updateFilterProgramId, } = slice.actions; export default slice.reducer;Por lo tanto, los detalles del filtro que contienen el año y el ID del programa se obtienen con la ayuda de este código:
const filterDetails = useAppSelector( (state) => state.locationsFilter.filterData );Digamos que tengo datos de filtro inicialmente:
filterDetails: {year:2021, programId: "Ameria"}Y quiero que mis nuevos datos de filtro sean
filterDetails: {year: "", programId: "Ameria"}Así que para esto lo que estoy haciendo:
const handleDelete = (e) => { e.preventDefault(); if (//some condition) { console.log("delete is called"); dispatch(updateFilterYear('')); } else { dispatch(updateFilterProgramId('')); } }La función handleDelete se llama correctamente cuando hago clic en un botón porque obtengo valor dentro de la consola.
Pero después de ejecutar este código, los datos de mi filtro no se actualizan. No estoy seguro de lo que estoy haciendo mal. Por favor, ayuda con esto.
Action.payload es de tipo objeto. Por lo tanto, debe hacer referencia a action.payload.year. Espero que este ejemplo sea de alguna utilidad.
setTodoDate: { reducer: (state, action: PayloadAction<TodoDate>) => { state.currentDate = action!.payload.date; }, prepare: (value) => ({ payload: { ...value }, }), }Creo que el problema se debe a que estás tratando de mutar tu estado directamente. Esta es una mala práctica, y el estado de Redux (y más generalmente reaccionar) está destinado a ser inmutable. Los reductores deben devolver una copia del estado, junto con los valores actualizados. Documentación vinculada a continuación.
Intenta escribir tus reductores como los siguientes
updateFilterYear: (state, action) => { return { ...state, filterData: { ...state.filterData, year: action.payload } }, updateFilterProgramId: (state, action) => { return { ...state, filterData: { ...state.filterData, programId: action.payload } },