React Redux – Tutorial para principiantes (II)

      No hay comentarios en React Redux – Tutorial para principiantes (II)

Continuamos con la serie de publicaciones que empezamos en http://developinginspanish.com/2020/09/15/react-redux-tutorial-para-principiantes/

Tutorial de React Redux: conociendo los reductores de Redux

¿Qué es un reductor? Un reductor de Redux es sólo una función de JavaScript. Toma dos parámetros: el estado actual y la acción (más sobre acciones pronto).

En un componente típico de React, el estado local podría mutar en su lugar. En Redux no está permitido hacer eso. El tercer principio de Redux (como lo describe su creador) prescribe que el estado es inmutable y no puede cambiar de lugar.

En otras palabras, el reductor debe ser puro. Una función pura devuelve exactamente la misma salida para la entrada dada. A pesar de esta terminología, el razonamiento sobre un reductor no es tan difícil.

En nuestro ejemplo, crearemos un reductor simple que toma el estado inicial y la acción como parámetros. Cree un directorio para el reductor raíz:

mkdir -p src/js/reducers

Luego crea un nuevo archivo, src/js/reducers/index.js:

const initialState = {
  articles: []
};

function rootReducer(state = initialState, action) {
  return state;
};

export default rootReducer;

Observa cómo se pasa el estado inicial como parámetro predeterminado. Pero a partir de ahora, nuestro reductor no hace nada más que devolver el estado inicial.

En la siguiente sección agregaremos una acción a la mezcla y las cosas se volverán interesantes.

Ver la rama en Github

Tutorial de React Redux: conociendo las acciones de Redux y las constantes con nombre

Los reductores Redux son sin duda el concepto más importante de Redux. Los reductores producen el estado de una aplicación. Pero, ¿cómo sabe un reductor cuándo generar el siguiente estado?

El segundo principio de Redux dice que la única forma de cambiar el estado es enviando una señal a la tienda. Esta señal es una acción. Entonces, «enviar una acción» significa enviar una señal a la tienda.

¿Confuso? Lo tranquilizador es que las acciones de Redux no son más que objetos JavaScript. Así es como se ve una acción:

{
  type: 'ADD_ARTICLE',
  payload: { title: 'React Redux Tutorial', id: 1 }
}

Como puede ver, es un objeto JavaScript con dos propiedades: tipo (type) y carga útil (payload).

La propiedad type controla cómo debería cambiar el estado y Redux siempre la requiere. En cambio, la propiedad de carga útil describe lo que debería cambiar y podría omitirse si no tiene nuevos datos para guardar en la tienda.

Como práctica recomendada en Redux, envolvemos cada acción dentro de una función, de modo que la creación de objetos se abstraiga. Dicha función toma el nombre de creador de acciones: juntemos todo creando un creador de acciones simple.

Crea un directorio para acciones:

mkdir -p src/js/actions

Luego crea un nuevo archivo, src/js/actions/index.js:

// src/js/actions/index.js

export function addArticle(payload) {
  return { type: "ADD_ARTICLE", payload }
};

Puedes observar que la propiedad de tipo es una cadena. Las cadenas son propensas a errores tipográficos y duplicados, por lo que es mejor declarar las acciones como constantes. Crea una nueva carpeta para ellos:

mkdir -p src/js/constants

Luego cree un nuevo archivo, src/js/constants/action-types.js:

// src/js/constants/action-types.js

export const ADD_ARTICLE = "ADD_ARTICLE";

Ahora abre nuevamente src/js/actions/index.js y actualiza la acción para usar tipos de acción:

// src/js/actions/index.js

import { ADD_ARTICLE } from "../constants/action-types";

export function addArticle(payload) {
  return { type: ADD_ARTICLE, payload };
}

Como puedes ver, estamos empezando a trabajar con varios archivos. Ese es el principal motivo de preocupación de Redux para la mayoría de las personas. Puede seguir la convención de Redux duck si lo deseas, que mantiene cada pieza relacionada con Redux en un solo archivo.

Un paso más cerca de tener una aplicación Redux en funcionamiento, pero primero necesitamos ajustar el reductor para captar la nueva acción.

Ver la rama en Github

Refactorización del reductor

Dejamos la última sección con la siguiente pregunta: ¿cómo sabe un reductor cuándo generar el siguiente estado? La clave aquí es la tienda de Redux. Cuando se envía una acción, la tienda reenvía un mensaje (el objeto de acción) al reductor.

En este punto, el reductor dice «oh, veamos la propiedad type de esta acción». Luego, dependiendo del tipo de acción, el reductor produce el siguiente estado y finalmente fusiona la carga útil de la acción en el nuevo estado.

Anteriormente creamos un reductor que no hace nada. ¡Arreglemoslo! Abre src/js/reducers/index.js y actualice el reductor con una declaración if para verificar el tipo de acción:

// src/js/reducers/index.js

import { ADD_ARTICLE } from "../constants/action-types";

const initialState = {
  articles: []
};

function rootReducer(state = initialState, action) {
  if (action.type === ADD_ARTICLE) {
    state.articles.push(action.payload);
  }
  return state;
}

export default rootReducer;

También hay una línea de código que empuja la carga útil de la acción al estado inicial. Parece lo correcto. ¡Pero está mal! Nuestro reductor rompe el principio principal de Redux: la inmutabilidad.

Array.prototype.push es una función impura: modifica la matriz original. Pero hay más. También estamos cambiando el estado inicial en su lugar.

Necesitamos una solución. Primero podemos devolver un nuevo objeto JavaScript con Object.assign. De esta forma mantenemos inalterado el estado original. Entonces podemos usar Array.prototype.concat en lugar de Array.prototype.push para mantener la matriz original:

import { ADD_ARTICLE } from "../constants/action-types";

const initialState = {
  articles: []
};

function rootReducer(state = initialState, action) {
  if (action.type === ADD_ARTICLE) {
    return Object.assign({}, state, {
      articles: state.articles.concat(action.payload)
    });
  }
  return state;
}

export default rootReducer;

Ahora el estado inicial se deja prístino y el estado resultante es solo una copia del estado inicial. Recuerda dos puntos clave para evitar mutaciones en Redux:

  • usa concat, slice o el operador de propagación para matrices
  • usa Object.assign o distribución de objetos de objetos

Si estas cosas sobre la inmutabilidad te parecen repetitivas, el kit de inicio Redux ha resuelto el problema. Échale un vistazo una vez que termines este tutorial.

En la siguiente sección jugaremos con Redux desde la consola del navegador. ¡Agárrate fuerte!

Ver la rama en Github

Tutorial de React Redux: métodos de la tienda Redux

Esto será muy rápido, lo prometo.

Es posible que se sorprenda al saber que Redux en sí es una biblioteca pequeña (2KB) y los métodos más importantes son sólo tres:

  • getState para leer el estado actual de la aplicación
  • dispatch para despachar una acción
  • subscribe para escuchar los cambios de estado

Jugaremos en la consola del navegador con ellos. Para hacerlo, necesitamos exportar la tienda y la acción que creamos como variables globales. Crea un nuevo archivo llamado src/js/index.js y coloca allí el siguiente código:

import store from "../js/store/index";
import { addArticle } from "../js/actions/index";

window.store = store;
window.addArticle = addArticle;

Ahora abre src/index.js también, limpia su contenido y actualízalo de la siguiente manera:

import index from "./js/index";

Ahora ejecute el servidor de desarrollo con:

npm start

Dirígete a http://localhost:3000/ y abre la consola con F12. Comienza leyendo el estado actual:

store.getState();
// output: {articles: Array(0)}

Cero artículos. De hecho, aún no hemos actualizado el estado inicial. Para hacer las cosas interesantes, podemos escuchar las actualizaciones del estado con subscribe.

El método de suscripción acepta una devolución de llamada que se activará cada vez que se envíe una acción. Despachar una acción significa notificar a la tienda que tenemos la intención de cambiar el estado.

Registra la devolución de llamada con:

store.subscribe(() => console.log('Look ma, Redux!!'));

Para cambiar el estado en Redux, necesitamos enviar una acción. Para enviar una acción, llamaremos al método de envío. Tenemos una acción por ahora: addArticle para agregar un nuevo elemento al estado. Despachemos la acción con:

store.dispatch( addArticle({ title: 'React Redux Tutorial for Beginners', id: 1 }) );

Inmediatamente después de ejecutar el código anterior, debería ver «Look ma, Redux !!». Para verificar que el estado cambió, ejecute nuevamente:

store.getState();
// output: {articles: Array(1)}

Y eso es todo. Esto es Redux en su forma más simple. ¿Fue tan difícil?

Una vez que te sientas seguro, dirígete a las siguientes secciones. ¡Vamos directamente a conectar React con Redux!

Hasta aquí la segunda parte de este tutorial de React Redux. Permanece atento, pronto publicaremos la tercera parte.

Puedes leer el artículo original en inglés en: https://www.valentinog.com/blog/redux/#react-redux-tutorial-who-this-guide-is-for

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *