Gestión del estado

Introducción

La gestión del estado es uno de los aspectos cruciales de cualquier aplicación React y front-end en general. Se trata de determinar cómo almacenar, actualizar y compartir datos dentro de la aplicación. En este capítulo, exploraremos las diferentes soluciones de gestión de estados disponibles en el contexto de React.

Las diferentes soluciones

Hay varios enfoques para gestionar el estado en una aplicación React, cada uno con sus propias ventajas y casos de uso específicos. Una idea que surge a menudo es agrupar todos los datos en un estado global, que a su vez puede dividirse en subestados.

Estamos hablando aquí de un estado que debe ser compartido en toda la aplicación, que no debe confundirse con el estado local de un componente, que es específico de un componente (con useState, por ejemplo). React proporciona una API llamada Context que permite compartir un estado entre diferentes componentes, pero este enfoque a veces tiene sus limitaciones y puede ser necesario utilizar una biblioteca de gestión de estado. También en este caso existen varias soluciones, siendo las más conocidas Redux y MobX.

En primer lugar, echemos un vistazo a las distintas soluciones que existen y que usted podra explorar en tus distintos proyectos. Luego, nos centraremos más en Redux y MobX.

1. Estado del servidor (server state) y estado del cliente (client state)

Cuando se cuenta con un store o un objeto global para almacenar el estado de la aplicación, puedes ser tentador almacenar todo allí, ya sea el estado de la interfaz de usuario, la lista de los últimos elementos devueltos por una API o incluso datos de negocio. Muchos desarrolladores de React han hecho esto durante mucho tiempo, pero ahora se considera...

Combinar contexto y los hooks

El contexto y los hooks son funcionalidades potentes de React que se pueden utilizar en combinación para gestionar y compartir el estado entre los componentes. En esta sección, exploraremos cómo utilizar la API Context junto con los hooks para gestionar el estado de la aplicación. Vamos desglosar los pasos para mostrar cómo crear un contexto y luego utilizarlo en todas partes.

1. Crear un contexto

El React Context API permite crear un contexto en el que usted puede almacenar datos globales y hacerlos accesibles a cualquier componente de la jerarquía sin tener que pasarlos explícitamente a través de las props. Se puede crear un contexto utilizando la función createContext().

En primer lugar, necesita crear un contexto para su aplicación, idealmente en un archivo separado llamado MyContext.js.

Utilise el método createContext de React:

import { createContext } from 'react'; 
 
const MyContext = createContext(); 
 
export default MyContext;

Este contexto tiene dos componentes, MyContext.Provider y MyContext.Consumer, de los que hablaremos a continuación.

Para que los componentes de su aplicación tengan acceso al estado y a las funciones de actualización, envuelva su aplicación o la parte correspondiente con MyContext.Provider en un archivo App.js:

import React, { useState } from 'react';  
import MyContext from './MyContext';  
import ChildComponent from './ChildComponent';  
  
function MyApp() {  
  // 1. Creación del estado que queremos...

Redux

Redux es una biblioteca JavaScript para gestionar el estado de una aplicación de manera predecible. Inspirada en los principios del lenguaje Elm, Redux funciona en torno a tres ejes fundamentales: un único estado fuente de verdad, un estado de solo lectura y modificaciones realizadas por funciones puras.

Las aplicaciones modernas de JavaScript pueden tener un estado complejo, repartido entre muchos componentes. La gestión de este estado puede llegar a ser confusa, especialmente cuando componentes no relacionados necesitan compartir o modificar partes de este estado. Redux proporciona una solución a este problema al centralizar el estado de la aplicación en un store global.

1. Elementos clave de Redux

Vamos a ver tres conceptos muy importantes, cada uno con un ejemplo. Por sí solos, representan la base de Redux, aunque, por supuesto, hay mucho más por descubrir. Para explicar estos elementos, vamos a utilizar un ejemplo bien conocido, el todo list.

a. Actions

Los actions describen cómo debe modificarse el estado. Generalmente se envían al store utilizando la función dispatch(). Cada acción es un objeto JavaScript simple que contiene al menos una clave de type.

{  
  type: 'ADD_TODO',  
  payload: 'Aprende Redux'  
}

Además del campo de type, los actions suelen tener un campo payload. La carga útil (payload) es una convención común para pasar información o datos adicionales sobre la acción. Es como un contenedor para todos los datos que quiere transmitir al reductor para realizar una actualización de estado.

b. Reductor (reducer)

Un reductor en el contexto de Redux es una función que tiene en cuenta el estado actual y una acción, y luego devuelve el nuevo estado. Los reductores son funciones puras, lo que significa que no modifican el estado actual, sino que devuelven una nueva copia del estado.

function todosReducer(state = [], action) {  
  switch (action.type) {  
    case 'ADD_TODO':  
      return [...state, action.payload];  
    default:  
      return...

MobX

MobX es una biblioteca de gestión de estado minimalista y reactiva para las aplicaciones JavaScript, incluyendo aquellas construidas con React. MobX tiene como objetivo simplificar la gestión de estados permitiendo a los componentes reaccionar automáticamente a los cambios de estado sin tener que escribir mucho código. En esta sección, exploraremos los conceptos clave de MobX y cómo utilizarlos en una aplicación React. Utilizando algunos ejemplos, intentaremos visualizar las diferencias con Redux. Nos ceñiremos a ejemplos del tipo todo list.

1. Principios básicos de MobX

MobX se basa en una serie de conceptos clave: observables, acciones, reacciones y computed values.

a. Observables

Los observables son variables especiales que MobX rastrea. Se utilizan para almacenar el estado de su aplicación.

He aquí un ejemplo de observable:

import { observable } from "mobx";  
  
const todoStore = observable({  
  todos: [],  
  get unfinishedTodoCount() {  
    return this.todos.filter(todo => !todo.completed).length;  
  }  
});

Aquí usamos el decorador observable para definir un objeto todoStore que contendrá la lista de todos y un cálculo para obtener el número de todos sin completar. Cualquier cambio...