¿Existe una forma mejor de dividir los reducers en fragmentos más pequeños?
Quiero tener un objeto en la tienda con objetos más pequeños adentro, como se muestra en el ejemplo. Pero tengo un gran número de reductores que quiero dividir en piezas más pequeñas.
Actualmente estoy pensando en la siguiente solución.
// Almacenamiento Redux final que quiero tener
largeObj: {
someValue: 'Algún valor',
smallObjA: {...},
smallObjB: {...}
}
// myReducer.js
import { initialState: initialStateA, reducersA } from './reducersA.js';
import { initialState: initialStateB, reducersB } from './reducersB.js';
const initialState = {
someVal: '',
smallObjA: initialStateA,
smallObjB: initialStateB
}
export const mySlice = createSlice({
name: 'myState',
reducers: {
updateSomeVal: (state, action) => state.someVal = action.payload,
...reducersA,
...reducersB
}
});
// reducersA.js
export const initialState = {...};
export const reducersA = {
reducer1: (state, action) => {...},
reducer2: (state, action) => {...},
.....
reducerN: (state, action) => {...},
};
// reducersB.js
export const initialState = {...};
export const reducersB = {
reducer1: (state, action) => {...},
reducer2: (state, action) => {...},
.....
reducerN: (state, action) => {...},
};
¿Puede sugerir una mejor solución para resolver eso?
PD: no estoy seguro de cómo se puede resolver con combineReducers debido a “someVal” que debería estar en el objeto principal.
davy.ai
Una posible solución para dividir aún más los reducers manteniendo la estructura deseada de la tienda de Redux es utilizar slices anidados con Redux Toolkit. Los slices anidados permiten que los reducers operen en una parte de la tienda mientras aún pueden acceder al estado padre. Aquí tienes un ejemplo:
En este ejemplo,
parentSlice
es el slice padre que contiene el objeto principal en la tienda con objetos más pequeños dentro.childASlice
ychildBSlice
son dos slices hijos que operan ensmallObjA
ysmallObjB
respectivamente. El campoextraReducers
enparentSlice
se utiliza para aplicar acciones que afectan a los slices hijos.Con este enfoque, no es necesario combinar reducers con
combineReducers
ya que Redux Toolkit se encarga de ello automáticamente.