Una guía para Core Redux: definición y conceptos

Como se define en el tutorial oficial de redux, Redux es un patrón y una biblioteca para administrar y actualizar el estado de la aplicación mediante eventos denominados «acciones».

En palabras más simples, Redux ayuda a administrar los cambios de estado al especificar qué se debe hacer cuando un estado particular cambia en su aplicación.

Tomemos el ejemplo de un sitio web de noticias. Los datos deben proporcionarse a la página principal de noticias y también deben pasarse a las páginas según las categorías preferidas por el usuario que inició sesión.

En React, el flujo de datos es unidireccional, lo que significa que solo se puede pasar a diferentes niveles.

Redux resuelve este problema, crea un almacenamiento de datos completamente diferente y lo distribuye a los componentes cuando sea necesario.

Si bien redux requiere que escriba piezas de código más largas para operaciones simples, siempre es mejor dedicar más tiempo a su código y hacer que todo se vea limpio, ordenado y segregado, exactamente para lo que Redux es adecuado.

Definitivamente debería elegir redux si tiene una aplicación como un reproductor de música, un reproductor de video, un sitio web de transmisión de video, blogs con gran cantidad de información, sitios web de noticias, etc.

Estas aplicaciones requieren una actualización continua y frecuente de los datos, lo que significa que el estado de estas aplicaciones cambia con frecuencia.

Además de esto, mientras se trabaja en una aplicación que tiene un gran equipo y una gran base de código, es beneficioso usar Redux debido a su código fácil de leer y comprender.

Al principio, puede ser un poco difícil para ti entender los conceptos de Redux.

Sin embargo, si tienes un buen dominio de los conceptos de React y ES6, ¡te acostumbrarás a Redux en poco tiempo!

Conceptos básicos de Redux:

1. Gestión de estado redux:
   Sigamos con nuestro ejemplo del sitio web de noticias Supongamos que después de cada 5 minutos, se debe publicar un nuevo artículo de noticias en el sitio web.

   Deje que el contenedor que contiene el artículo de noticias se llame ‘contenedor de noticias’.Ahora puede haber un escenario en el que este artículo de noticias específico deba mostrarse en el sitio web principal de noticias y también en las páginas de inicio de los lectores que han preferido ver esa categoría particular de noticias. envase’. Tenemos dos componentes, contenedor de noticias y contenedor de noticias de usuario que tienen que usar el mismo estado y están ubicados en ubicaciones completamente diferentes de nuestra aplicación web de noticias.Aquí es donde Redux entra en escena. Extrae el estado y lo coloca en una ubicación completamente diferente, lejos del árbol de componentes y, por lo tanto, múltiples componentes pueden acceder fácilmente al estado específico. Esto hace que nuestro código sea más fácil de usar y administrar.

2. Inmutabilidad Redux:

   Mutable significa que se puede cambiar, e inmutable significa que no se puede cambiar.Cuando estamos creando un objeto de estado, si el objeto es mutable, entonces las propiedades del objeto cambiarán y causarán una gran obstrucción durante la representación. Sin embargo, si el estado cambia de manera inmutable, se crea un nuevo objeto (copia del objeto de estado original) cada vez que se observa un cambio de estado que preserva la integridad y la originalidad del objeto de estado, evitando así errores.

3. Acciones de reducción:
   A primera vista, las acciones pueden parecerle que las acciones le dicen qué hacer cuando cambia un estado.

   Una acción debe tener obligatoriamente un tipo que es una cadena y sigue la sintaxis de «dominio/nombre del evento» donde un dominio es la categoría de la acción específica y el nombre del evento es el cambio de estado que se debe realizar.

Ejemplo de una acción:

const addNews = {
      type: ‘News/updateNewsContainer’,
      payload: ‘Recent Article’ 
}

Un parámetro opcional llamado carga útil se puede agregar el que tiene más información sobre el cambio de estado realizado.

cuatro Creadores de acciones Redux:

Puede sentir que es muy difícil crear un nuevo objeto de acción cada vez que se debe cambiar un estado.

Los creadores de acciones son funciones que devuelven objetos de acción.

Ejemplo de una acción:

const addNews = news => {
     return {
         type: ‘News/updateNewsContainer’,
         payload: news
     }
}

Cinco. Reductor de reducción:

Un reductor es una función que provoca cambios de estado en función de la acción que se realiza en la aplicación.

Observamos anteriormente que Redux actualiza el estado de forma inmutable, por lo tanto, los reductores deben seguir las mismas reglas y asegurarse de que no esté modificando el estado anterior, sino que debe crear una copia del estado y realizar todos los cambios necesarios en el estado recién copiado.

Los reductores son bastante fáciles desde el punto de vista lógico: el estado solo se cambiará cuando la lógica de la aplicación lo permita.

Ejemplo de un reductor:

const initialState = {value:0} //The initial state is initialized to null (zero) 
function likesReducer(state=initialState, action){
  if(action.type === ‘likes/increment’){
     //Let the action be a user clicking the like button to increase the number of likes 
     return {
       …state, //create a copy of the existing state object 
       value: state.value + 1 //update the value of the state in the new state object 
    }
  }
  return state //in case the action is not to increment the number of likes, nothing happens
}

6. Tienda Redux:

Store es el objeto que contiene todos los estados existentes actualmente.

Los estados actuales se manejan para eludir el reductor como argumento y el estado se obtiene mediante un método obtenerEstado.

Ejemplo de una tienda:

import {configureStore} from ‘@reduxjs/toolkit’
const store = configureStore({reducer: likesReducer})
To get the current state use, store.getState()

7. Despacho Redux:

Dispatch es el método de almacenamiento que da una señal a la aplicación para cambiar el estado.

Solo después de que se llama a la función de envío, se producen cambios en un estado.

Ejemplos de una llamada de despacho:

store.dispatch({type: ‘likes/increment’}) //passing an action as argument 
store.dispatch(addNews()) //passing an action creator as argument

8. Selector de reducción:

Los selectores se utilizan para extraer información de los estados almacenados en la tienda.

Ejemplo de selector:

const selectLikesValue = state => state.value //selector 
const currentLikesValue = selectLikesValue(store.getState())

Ahora que conoce todos los conceptos básicos de Redux. Ha recibido una ventaja inicial; ahora puede continuar aprendiendo Redux por su cuenta.

¿ Te fue útil este artículo ?
⬇️ Ayudame compartiendo para poder llegar a más personas.⬇️