Buenas prácticas al usar Redux

Desde su creación en 2015 por parte de Dan Abramov y Andrew Clark, Redux ha cambiado mucho la forma en que desarrollamos la lógica para nuestras Single Page Application. Pero no todo ha sido miel sobre hojuelas, muchos desarrolladores han migrado a Redux sin siquiera entender el para qué usarlo y eso ha generado malas prácticas como:

• Agregar las Actions y Constantes dentro de un mismo archivo.
• Crear todos los reducers en un solo lugar.
• El eterno problema de variables poco descriptivas.

Estas malas prácticas empiezan a dificultar el crecimiento de nuestro proyecto ya que el código se vuelve difícil de comprender, los archivos son poco legibles, si un nuevo desarrollador entra al proyecto le va a llevar bastante tiempo comprender la lógica del proyecto.

Por ello, es muy importante seguir buenas prácticas en tu próximo proyecto con Redux, no importa si el proyecto es pequeño y es más sencillo ignorar las buenas prácticas, a la larga tu proyecto puede seguir creciendo y las malas prácticas del inicio pueden impedir que crezca.

Ducks al rescate

Una buena forma de solucionar los problemas de malas prácticas es tener tus archivos usando Ducks: separa tu aplicación de Redux en módulos juntando reducers, tipos y creadores de acciones siguiendo unas cuantas reglas por cada módulo:

1. Debe exportar por defecto una función llamada reducer().
2. Debe exportar sus creadores de acciones como funciones.
3. Debe definir sus tipos de acciones en el formato modulo-app/reducer/ACTION_TYPE
4. Puede exportar sus tipos de acciones cómo UPPER_SNAKE_CASE si otro reducer lo va a usar.

Por ejemplo, para un counter sencillo tu código quedaría de la siguiente manera:

const INCREMENT = 'redux-example/counter/INCREMENT';

const initialState = {
  count: 0
};

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case INCREMENT:
      const {count} = state;
      return {
        count: count + 1
      };
    default:
      return state;
  }
}

export function increment() {
  return {
    type: INCREMENT
  };
}

Ya en tu reducer principal solamente importas el reducer correspondiente de cada archivo y lo combinas con combineReducers de Redux:

import { combineReducers } from 'redux';
import auth from './auth';
import counter from './counter';
import info from './info';

export default combineReducers({
  auth,
  counter,
  info,
});

Nombrando variables

Recuerda que la labor más difícil al momento de programar muchas veces es cómo vas a llamar a la variable que estás escribiendo, un pequeño y excelente consejo es seguir el siguiente formato para el nombre de tus acciones en Redux:

<NOUN>_<VERB>, todo en mayúsculas.

Para el caso de nombrar creadores de acciones usa la siguiente plantilla:

<verb><Noun>.

Si añades Redux a tus proyectos sin seguir buenas prácticas es probable que lo termines odiando y te pierdas de las grandes ventajas que trae el implementar esta gran librería a tu proyecto, por ello te invito a que mires el Curso Profesional de React.js y Redux para aprender de manera práctica cómo integrar Redux en un proyecto con React.