Los datos se proporcionan de forma dinámica y desconozco su valor para asignarlos en initialState. Me causa un error con el que no puedo lidiar.
¿Cómo actualizar el objeto en el estado si no había ningún objeto en initialState?
filteringSlice.ts:12 Uncaught TypeError: Cannot read properties of undefined (reading 'products') at addFilter (filteringSlice.ts:12:1) at createReducer.ts:280:1 at produce (immerClass.ts:94:1) at createReducer.ts:279:1 at Array.reduce (<anonymous>) at reducer (createReducer.ts:246:1) at reducer (createSlice.ts:325:1) at combination (redux.js:560:1) at k (<anonymous>:2235:16) at D (<anonymous>:2251:13) onChange={(selectedValue) => { dispatch( addFilter({ products: { category__name: { filter: selectedValue } }, }) ); }} import { createSlice } from "@reduxjs/toolkit"; const initialState = {} as any; const filteringSlice = createSlice({ name: "filtering", initialState, reducers: { addFilter: (state, action) => { const key = Object.keys(action.payload)[0]; const key2 = Object.keys(action.payload[key])[0]; const values = Object.values(action.payload[key])[0]; //@ts-ignore state.filters[key][key2] = { ...state.filters[key][key2], ...values }; }, }, }); const { reducer, actions } = filteringSlice; export const { addFilter } = actions; export default reducer;Entonces su estado es un objeto vacío al principio:
const initialState = {} as any;Pero luego está accediendo como si tuviera una estructura anidada más profunda:
state.filters[key][key2] = ... Eso no funciona porque no hay state['filters'] , ni state['filters']['products'] , etc.
Debe crear cada nivel de este anidamiento manualmente para que esto funcione (o piense en una estructura mejor y más plana para su estado):
/* action.payload = { products: { category__name: { filter: selectedValue } } } */ const key = Object.keys(action.payload)[0]; // 'products' const key2 = Object.keys(action.payload[key])[0]; // 'category__name' const values = Object.values(action.payload[key])[0]; // selectedValue if (!state.filters) { state.filters = {}; } if (!state.filters[key]) { state.filters[key] = {}; } if (!state.filters[key][key2]) { state.filters[key][key2] = {}; } state.filters[key][key2] = { ...state.filters[key][key2], ...values };