Entonces comencé a aprender React hace una semana e inevitablemente llegué al problema del estado y cómo se supone que los componentes se comunican con el resto de la aplicación. Busqué y Redux parece ser el sabor del mes. Leí toda la documentación y creo que en realidad es una idea bastante revolucionaria. Aquí están mis pensamientos al respecto:
En general, se acepta que el estado es bastante malo y una gran fuente de errores de programación. En lugar de esparcirlo por toda la aplicación, Redux dice ¿por qué no tenerlo todo concentrado en un árbol de estado global que debe emitir acciones para cambiar? Suena interesante. Todos los programas necesitan un estado, así que guardémoslo en un espacio impuro y modifiquémoslo solo desde allí para que los errores sean fáciles de localizar. Luego, también podemos vincular declarativamente piezas de estado individuales a componentes de React y hacer que se redibujen automáticamente y todo es hermoso.
Sin embargo, tengo dos preguntas sobre todo este diseño. Por un lado, ¿por qué es necesario que el árbol estatal sea inmutable? Digamos que no me importa la depuración de viajes en el tiempo, la recarga en caliente y ya he implementado deshacer / rehacer en mi aplicación. Parece tan engorroso tener que hacer esto:
case COMPLETE_TODO:
return [
...state.slice(0, action.index),
Object.assign({}, state[action.index], {
completed: true
}),
...state.slice(action.index + 1)
];
En lugar de esto:
case COMPLETE_TODO:
state[action.index].completed = true;
Sin mencionar que estoy haciendo una pizarra en línea solo para aprender y cada cambio de estado puede ser tan simple como agregar un trazo de pincel a la lista de comandos. Después de un tiempo (cientos de pinceladas), la duplicación de toda esta matriz podría comenzar a ser extremadamente costosa y requerir mucho tiempo.
Estoy de acuerdo con un árbol de estado global que es independiente de la interfaz de usuario que se muta a través de acciones, pero ¿realmente necesita ser inmutable? ¿Qué hay de malo en una implementación simple como esta (un borrador muy preliminar escrito en 1 minuto)?
var store = { items: [] };
export function getState() {
return store;
}
export function addTodo(text) {
store.items.push({ "text": text, "completed", false});
}
export function completeTodo(index) {
store.items[index].completed = true;
}
Sigue siendo un árbol de estado global mutado a través de acciones emitidas, pero extremadamente simple y eficiente.
immutablejs
y utilizarreturn state.setIn([action.index, 'completed'], true);
para reducir la repetición.