React Redux – Tutorial para principiantes

      2 comentarios en React Redux – Tutorial para principiantes

Empezamos una serie de publicaciones dirigidas a principiantes donde explicaremos qué es Redux y cómo usarlo. ¡Vamos allá!

Cuando comencé a aprender Redux, me hubiera gustado leer un «Redux para tontos». Me sentía tonto porque no podía entender las acciones, los creadores de acciones, los reducers. ¿Y el middleware? ¡Tienes que ser una broma!

Affiliated Ad

Así que durante esos días comencé a aprender Redux por el simple hecho de aprender más, mientras escribía mi propio tutorial de React Redux. Desde entonces, aprendí mucho y este tutorial de React Redux es un esfuerzo para ayudarte a ti también a aprender Redux, de la manera más simple.

Este tutorial también incluye Redux Toolkit.

Redux: dónde estamos ahora

Redux ha cambiado mucho. El kit de herramientas (Toolkit) de Redux se ha convertido en la forma recomendada de usar Redux, el nuevo codebase basado en el kit de herramientas de Redux diferirán mucho de lo que solíamos escribir en el pasado.

Sin embargo, los bloques de construcción fundamentales de Redux siguen siendo la acción, los reducers (reductores), el middleware y el store (tienda), y necesita un buen conocimiento de estos bloques para dominar Redux y el kit de herramientas de Redux.

En este tutorial, cubriré primero el código «clásico» de Redux y React / Redux con connect. Más adelante verremos cómo refactorizar a Redux Toolkit. Si prefieres ver vídeos, echa un vistazo a este curso gratuito (en inglés) de Redux.

Tutorial de React Redux: para quién es esta guía

La siguiente guía de React Redux es para desarrolladores de JavaScript con un buen conocimiento de ES6 y React. Hay innumerables tutoriales de React en línea si deseas actualizar tus conociemientos, pero si estás comenzando, te sugiero que leas Getting Started with React de Tania Rascia (en inglés).

Tutorial de React Redux: qué aprenderás

La guía cubre principalmente Redux con React debido a la amplia adopción de esta combinación, pero Redux también se puede usar como una biblioteca independiente sin ningún framework/biblioteca frontend.

Así que en la siguiente guía aprenderás:

  • Qué es Redux
  • Bloques de construcción de Redux
  • Cómo usar Redux independientemente
  • Cómo usar Redux con React

Tutorial de React Redux: un entorno de desarrollo React mínimo

Antes de comenzar, asegúrate de tener un entorno de desarrollo de React configurado.

Para hacer uno, puedse seguir Cómo configurar React, webpack y Babel o, mejor aún, usar create-react-app:

npx create-react-app react-redux-tutorial

Una vez hecho esto, estarás listo.

Tutorial de React Redux: ¿qué es el estado?

¿Qué es Redux? Para responder a esa pregunta, primero debemos hablar sobre el estado en las aplicaciones web JavaScript. Considera un flujo de usuario simple:

«Como usuario, puedo hacer clic en un botón llamado Haga clic en mí y un modal debería aparecer poco después».

Adivina qué, incluso en esta interacción trivial hay un estado con el que debemos lidiar. Por ejemplo, podemos describir el estado inicial de la aplicación como un objeto JavaScript simple:

const state = {
  buttonClicked: 'no',
  modalOpen: 'no'
}

Cuando el usuario hace clic, el estado cambia y tenemos:

const state = {
  buttonClicked: 'yes',
  modalOpen: 'yes'
}

¿Cómo realiza un seguimiento confiable de estos cambios de estado? ¿Qué pasa si el estado es mutado por accidente por alguna lógica no relacionada? ¿Existe alguna biblioteca que pueda ayudarnos?

Además, si trabajaste con React antes del término estado, no debería sorprenderte. Supongo que ya escribiste algún componente de React «con estado» como este:

import React, { Component } from "react";

class ExampleComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      articles: [
        { title: "React Redux Tutorial for Beginners", id: 1 },
        { title: "TypeScript tutorial for beginners", id: 2 }
      ]
    };
  }

  render() {
    const { articles } = this.state;
    return <ul>{articles.map(el => <li key={el.id}>{el.title}</li>)}</ul>;
  }
}

Un componente de React con estado es una clase de JavaScript (con los hooks de React, ese ya no es el caso).

En un componente de React, el estado contiene datos que se pueden presentar al usuario. El estado en React también podría cambiar en respuesta a acciones y eventos: de hecho, puede actualizar el estado del componente local con this.setState ().

Entonces, en general, una aplicación típica de JavaScript está llena de estados. Por ejemplo, el estado es:

  • lo que ve el usuario (datos)
  • los datos que obtenemos de una API
  • la URL
  • los elementos seleccionados dentro de una página
  • eventuales errores para mostrar al usuario

Habiendo visto lo básico, hablemos ahora sobre qué problema intenta resolver Redux.

¿Qué problema resuelve Redux?

Entonces, el estado está en todas partes en la aplicación web. A partir de ahora hablaré sobre el estado y la lógica en el contexto de una aplicación React típica, pero considera estos conceptos aplicables a cualquier arquitectura frontend, independientemente de la biblioteca específica. La cuestión es, ¿te imaginas cuánto estado tiene una aplicación web?

Incluso una aplicación inocente de una sola página podría crecer sin control sin límites claros entre cada capa de la aplicación. Esto es particularmente cierto en React.

Sí, puede arreglárselas manteniendo el estado dentro de un componente principal de React (o en contexto) siempre que la aplicación siga siendo pequeña. Entonces las cosas se volverán complicadas, especialmente cuando agregue más comportamientos a la aplicación. En algún momento, es posible que desee buscar una forma coherente de realizar un seguimiento de los cambios de estado. No sólo eso, diría que los componentes frontend no deberían conocer la lógica empresarial. Nunca.

Desafortunadamente, una tonelada de lógica se mete en los componentes frontend en estos días. ¿Existe una alternativa a esta agonía?

Redux puede resolver exactamente esos problemas. Puede que no esté claro al principio, pero Redux ayuda a dar a cada componente de la interfaz el estado exacto que necesita.

Aún mejor, Redux puede contener la lógica empresarial dentro de su propia capa (middleware), junto con el código para obtener datos. Los beneficios de este enfoque son múltiples.

En las siguientes secciones veremos cuándo y cómo usar Redux en tus aplicaciones. Primero, un par de palabras sobre la pregunta esencial: «¿debería usar Redux»?

Tutorial de React Redux: ¿debería usar Redux?

Debo admitir que soy un poco parcial porque me gusta Redux y lo sugiero cada vez que me uno a un nuevo proyecto. Pero tal vez no necesites ni Redux, ni alternativas como Mobx y similares. Más aún si está trabajando en un proyecto simple.

En React, por ejemplo, hay muchas formas de evitar el uso de Redux: por ejemplo children props, o la API de contexto.

Pero para proyectos medianos a grandes, siempre encontré a Redux (o un equivalente) casi obligatorio: las bibliotecas de administración de estado mantienen maravillosamente la lógica y los comportamientos abstraídos de la interfaz de usuario. La capacidad de testeo de la interfaz de usuario se dispara y, por tanto, la productividad del desarrollador. Si lo miras desde otra perspectiva, puedes argumentar que Redux tiene un precio. Agrega otra capa de abstracción a su aplicación.

¿Qué precio estás dispuesto a pagar? ¿Componentes de interfaz complicados o múltiples capas de abstracciones?

Basta de hablar. En la siguiente sección, comenzaremos a crear una prueba de concepto para presentar:

  • Principios fundamentales de Redux
  • Redux junto con React

Nuevamente, asegúrate de tener un entorno de desarrollo React listo para usar.

Tutorial de React Redux: conociendo la tienda (store) Redux

Cuando me acerqué a Redux por primera vez, estaba confundido. Hay demasiada terminología: acción, reductor, middleware. Pero además de eso, no me quedó claro cómo estaban pegadas todas las partes móviles. ¿Había algunos minions o qué? En Redux no hay minions (desafortunadamente).

Lo que orquesta todos los engranajes es la tienda. Repite conmigo: la tienda. La tienda en Redux es una especie de magia y contiene todo el estado de la aplicación.

Así que creemos una tienda para empezar a jugar con Redux. Ve a tu entorno de desarrollo React e instala Redux:

cd react-redux-tutorial

npm i redux --save-dev

Crea un directorio para la tienda:

mkdir -p src/js/store

A continuación, crea un nuevo archivo, src/js/store/index.js e inicializa la tienda:

// src/js/store/index.js

import { createStore } from "redux";
import rootReducer from "../reducers/index";

const store = createStore(rootReducer);

export default store;

Como puedse ver, la tienda (store) es el resultado de llamar a createStore, una función de la biblioteca Redux. createStore toma un reductor como primer argumento y en nuestro caso pasamos rootReducer (aún no presente).

También puedes pasar un estado inicial a createStore, útil para la representación del lado del servidor y la precarga del estado, pero por ahora no estamos interesados en eso. El concepto más importante a entender aquí es que el estado en Redux proviene de reductores. Repitamos: los reductores producen el estado de su aplicación.

Armados con ese conocimiento, pasemos a nuestro primer reductor Redux.

Ver la rama en Github

Hasta aquí la primera parte de este tutorial de React Redux. Permanece atento, pronto publicaremos la segunda 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

2 pensamientos en “React Redux – Tutorial para principiantes

  1. EliezerP

    Excelente, estoy aprendiendo Redux viendo este tutorial, que esta muy bien explicado y lo recomiendo ampliamente, que lastima que no me tope con este tutorial hace 2 meses a tras porque de verdad lo necesitaba porque hasta ahora he perdido 2 oportunidades de trabajo por no saber Redux, nuevamente gracias por compartir tus conocimientos

    Responder

Deja un comentario

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