Mejores prácticas para Redux

En 2019, todavía hay un lugar muy importante para Redux en el desarrollo de aplicaciones web de gran escala que no se han establecido con los enfoques más recientes. Al abogar por Redux, creo que la guía arquitectónica que proporciona a las aplicaciones que vienen de Flux sigue siendo crucial.

El flujo predecible de acciones hacia un almacén (store) común que luego empuja los cambios en React para actualizar la vista permite secuencias de operaciones predecibles y depurables (debuggable), que son más fáciles de estandarizar en un entorno de equipo.

Tener pautas acordadas para cada parte de tu código en un proyecto facilitará la comprensión del mismo y mantendrá un historial de git más limpio, ya que cada desarrollador que toque los archivos no sentirá la necesidad de refactorizarlos a su propia manera.

mapStateToProps

mapStateToProps resulta un poco confuso al principio, pero si lo miras de cerca, es simplemente una función (sin biblioteca importada) que retorna una parte específica del estado actual.

const mapStateToProps = (state) => {
	return { things: state.things };
};

Una alternativa válida para hacerlo más legible es desestructurar el estado:

const mapStateToProps = ({ configuration }) => {
	return { colors: configuration.colors };
};

mapDispatchToProps

Haz esto:

const mapDispatchToProps = {
	decrement: () => ({ type: 'DECREMENT' }),
	increment: () => ({ type: 'INCREMENT' }),
};

En lugar de esto:

const mapDispatchToProps = (dispatch) => {
	return {
		decrement: () => dispatch({ type: 'DECREMENT' }),
		increment: () => dispatch({ type: 'INCREMENT' }),
	};
};

La diferencia es que confiamos en react-redux para inyectar dispatch en cada valor que sea una función en nuestro objeto mapDispatchToProps, en lugar de depender de react-redux para inyectar dispatch en nuestra función mapDispatchToProps. Esta es la forma preferida según la documentación oficial de react-redux. https://react-redux.js.org/using-react-redux/connect-mapdispatch#defining-mapdispatchtoprops-as-an-object

connect()

Cuando se usa la función connect() de Redux para exportar un componente, como por ejemplo:

const mapStateToProps = ({ configuration }) => {
	return { colors: configuration.colors };
};

const mapDispatchToProps = {
	decrement: () => ({ type: 'DECREMENT' }),
	increment: () => ({ type: 'INCREMENT' }),
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

estamos exportando la combinación de un componente que está conectado al almacén (store). Piensa en connect() como el pegamento o la interfaz entre el componente y el almacén. Cualquier cambio en el estado se reflejará en el componente porque está “conectado” a mapStateToProps, y esa información ahora está disponible para el componente a través de una prop.