Platzi
Platzi

Suscríbete a Expert y aprende de tecnología al mejor precio anual.

Antes:$249
$209
Currency
Antes:$249
Ahorras:$40
COMIENZA AHORA
14

Buenas prácticas al usar Redux

49258Puntos

hace 2 años

Curso de React Router y Redux 2019
Curso de React Router y Redux 2019

Curso de React Router y Redux 2019

Aprende de forma práctica a implementar React Router para manejar rutas en tus proyectos de frontend como un profesional. También implementa Redux, la librería de JavaScript usada por Instagram para facilitar el desarrollo de aplicaciones web interactivas. Domina el manejo efectivo y centralizado de "estados" e implementa el flujo completo de Redux en PlatziVideo.

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
};

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

exportfunctionincrement() {
  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';

exportdefault 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 de React Router y Redux y aprendas de manera práctica cómo integrar Redux en un proyecto con React.

Curso de React Router y Redux 2019
Curso de React Router y Redux 2019

Curso de React Router y Redux 2019

Aprende de forma práctica a implementar React Router para manejar rutas en tus proyectos de frontend como un profesional. También implementa Redux, la librería de JavaScript usada por Instagram para facilitar el desarrollo de aplicaciones web interactivas. Domina el manejo efectivo y centralizado de "estados" e implementa el flujo completo de Redux en PlatziVideo.
Demian
Demian
demian

49258Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
2
3337Puntos

¿Existen buenas prácticas a la hora de mapear los creadores de acciones a los props de componentes de React?, desde ya muchas gracias por este post. 😄

2
124Puntos

Your post is great and engaging, the content is very practical, and gets people’s attention. Thank you for sharing. driving directions

1
17Puntos

Awesome things you’ve generally imparted to us. Simply continue written work this sort of posts.The time which was squandered in going for educational cost now it can be utilized for studies.Thanks canadian citizenship test