Estoy empezando a incorporar Redux a una aplicación React, pero tengo problemas para entender dónde se usa exactamente mi 'diseño de estado maestro'.
Por contexto, estoy pensando en el estado de la aplicación como un árbol gigante, y tengo reductores que se encargan de pequeños fragmentos del árbol. Pensé un poco en cómo quiero que se represente el árbol de estado, y tengo una variable initialState que es básicamente un objeto Immutable.js con un montón de objetos secundarios que contienen las diversas partes del estado de mi aplicación.
He dividido mis reductores para asignarlos a estas diversas partes de mi aplicación, pero tengo problemas para entender cómo se crea el árbol de estado maestro gigante. Entiendo que cada reductor toma todo el árbol de estado + acción y devuelve un nuevo estado basado en la acción, pero no entiendo dónde colocar el 'estado inicial' si el estado que entra en un reductor no está undefined .
En otras palabras: ¿se supone que un solo reductor está a cargo de crear todo el árbol de estado si originalmente no está definido (y si es así, dónde debería vivir ese reductor)? ¿O debería algún reductor asignar un argumento de estado indefinido a la variable initialState ?
Si usa combineReducers , no tiene que crear la "raíz". La función devuelta por combineReducers es en sí misma un reductor, y creará automáticamente la raíz de su árbol de estado con una "rama" (propiedad) para cada uno de los reductores que pasó. Sus reductores solo deben preocuparse por inicializar su propia rama con un estado inicial.
Si no está utilizando combineReducers , creo que cada reductor solo debería preocuparse por la parte del árbol de estado en la que actúa. Mover eso a un solo reductor "maestro" dividiría innecesariamente el código relacionado, lo que haría que su aplicación fuera más difícil de razonar.
Como se ilustra en los ejemplos de la guía oficial , puede usar un valor predeterminado para el primer argumento del reductor, que será su estado inicial.
function todoApp(state = initialState, action) { switch (action.type) { case SET_VISIBILITY_FILTER: return Object.assign({}, state, { visibilityFilter: action.filter }) case ADD_TODO: return Object.assign({}, state, { todos: [ ...state.todos, { text: action.text, completed: false } ] }) default: return state } }Este estado inicial puede ser un valor predeterminado codificado en el código del cliente. O pueden ser algunos datos cargados en la página HTML por el servidor. Por ejemplo, en una plantilla EJS representada en el servidor, puede tener:
<script> window.INITIAL_STATE = <%= JSON.stringify(initialState) %> </script>