Combinando funciones reductoras
En aplicaciones grandes la función reductora se puede volver muy larga y difícil de manejar:
1
const reducer = (state, action) => {
2
if (action.type == "...") {
3
// código
4
} else if (action.type == "...") {
5
// más código
6
}
7
// más else ifs, quizá decenas o cientos
8
}
Copied!
Redux nos permite dividir la función reductora en funciones más manejables a través de la función combineReducers:
1
import { createStore, combineReducers } from "redux";
2
3
const reducer1 = (state={}, action) => {
4
// ...
5
return state;
6
}
7
8
const reducer2 = (state={}, action) => {
9
// ...
10
return state;
11
}
12
13
const store = createStore(combineReducers({ tasks: reducer1, users: reducer2 }));
Copied!
reducer1 se va a encargar de realizar los cambios sobre el arreglo de tasks y reducer2 se va a encargar de realizar los cambios sobre users. Cada función reductora se va a encargar de una parte del estado.
Algo particular de este código es que estamos inicializando el estado en los argumentos de las funciones reductoras y ya no estamos utilizando el segundo argumento de createStore que recibe el estado inicial. Esto se debe a que combineReducers, al principio, llama a todas las funciones reductoras pasándoles undefined como primer argumento.
Last modified 3yr ago
Copy link