Redux es ampliamente reconocido como una biblioteca sólida de administración de estado diseñada específicamente para aplicaciones JavaScript, a menudo utilizada en conjunto con el popular marco React. Al ofrecer un contenedor de estado confiable, Redux establece una base sólida que simplifica enormemente la tarea de manejar y solucionar problemas de estados de las aplicaciones. Esta guía profundiza en los componentes fundamentales que componen Redux, brinda explicaciones detalladas de cada elemento e ilustra cómo interoperan sinérgicamente para optimizar la funcionalidad general de la aplicación. Esta exploración en profundidad tiene como objetivo dilucidar el funcionamiento interno de Redux, permitiendo a los desarrolladores comprender las complejidades de esta herramienta de gestión estatal y aprovechar sus capacidades de manera efectiva en sus proyectos.

Tabla de contenido

1. Introducción a Redux
2. Configuración de Redux en una aplicación React
3. Acciones y tipos de acciones
4. Reductores y Rebanadas
5. Configurando la Tienda
6. Conectando componentes de React
7. Conclusión y referencias

1. Introducción a Redux

Redux sigue un modelo de flujo de datos unidireccional y se basa en tres principios básicos:

• Fuente única de verdad: El estado de toda su aplicación se almacena en un árbol de objetos dentro de una única tienda. Esta centralización facilita la depuración y el seguimiento de los cambios en su aplicación.
• El estado es de solo lectura: La única forma de cambiar el estado es emitir una acción, un objeto que describa lo que sucedió. Esto garantiza que las mutaciones estatales sean predecibles y rastreables.
• Los cambios se realizan con funciones puras: Para especificar cómo las acciones transforman el árbol de estado, escribe reductores puros. Las funciones puras son predecibles y comprobables, lo que simplifica la depuración y las pruebas unitarias.

2. Configurar Redux en una aplicación React

Primero, instale Redux y React-Redux:

npm install redux react-redux @reduxjs/toolkit

Este comando instala la biblioteca principal de Redux, los enlaces de React para Redux y el kit de herramientas de Redux, que simplifica muchas tareas comunes como configurar la tienda y crear segmentos.

3. Acciones y tipos de acciones

Las acciones son cargas útiles de información que envían datos desde su aplicación a su tienda Redux. Los tipos de acción son constantes que representan la acción.

tipos de acciones.js

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const INCREMENT_BY_VALUE = "INCREMENT_BY_VALUE";
export const RESET = "RESET";

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
export const incrementByValue = (value) => ({
  type: INCREMENT_BY_VALUE,
  payload: value,
});
export const reset = () => ({ type: RESET });

Definir acciones y tipos de acciones claramente ayuda a mantener la coherencia y reduce los errores en su aplicación.

4. Reductores y Rebanadas

Los reductores especifican cómo cambia el estado de la aplicación en respuesta a las acciones enviadas a la tienda. Los sectores son una colección de acciones y lógica reductora de Redux para una única función de su aplicación, creadas con el método createSlice de Redux Toolkit.

contadorSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = { number: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.number  = 5;
    },
    decrement: (state) => {
      state.number = Math.max(0, state.number - 5);
    },
    incrementByValue: (state, action) => {
      state.number  = action.payload;
    },
    reset: (state) => {
      state.number = 0;
    },
  },
});

export const { increment, decrement, incrementByValue, reset } = counterSlice.actions;

export default counterSlice.reducer;

Para combinar varios sectores:

raízReducer.js

import { combineReducers } from "@reduxjs/toolkit";
import counterReducer from "../slices/counterSlice";

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

5. Configurando la Tienda

La tienda es el objeto que reúne acciones y reductores. Mantiene el estado de la aplicación, permite el acceso a ella mediante getState(), la actualiza mediante despacho(acción) y registra oyentes mediante suscripción(oyente).

tienda.js

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "../reducers/rootReducer";

const store = configureStore({
  reducer: rootReducer,
});

export default store;

6. Conexión de componentes de React

Para conectar los componentes de React a la tienda Redux, use el componente Proveedor de react-redux para pasar la tienda a sus componentes, y use los ganchos useSelector y useDispatch para acceder y manipular el estado.

aplicación.js

import React from "react";
import { Provider } from "react-redux";
import store from "./redux/store/store";
import Counter from "./components/Counter";
import MusCo from "./MusCo redux logo.png";

function App() {
  return (
    
      

        
        

          Practice Redux with MusCo
        
        

          
          

            by 
            Mustafa 
            Coskuncelebi
          
        
      
    
  );
}

export default App;

ContraComponente.js

import { useDispatch, useSelector } from "react-redux";
import {
  decrement,
  increment,
  incrementByValue,
  reset,
} from "../slices/counterSlice";
import { useState, useEffect } from "react";

function Counter() {
  const [value, setValue] = useState("");
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  useEffect(() => {
    const showcase = document.querySelector("#showcase");
    if (number 
      
Counter
      
{number}
      

         dispatch(increment())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
          Increment by 5
        
         dispatch(decrement())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={number 
          Decrement by 5
        
      
      

        

           {
                   let newValue = e.target.value.trim();
                   if (newValue === "") {
                     newValue = "";
                     reset();
                   }
                   if (/^\d*$/.test(newValue)) {
                     setValue(newValue);
                   }
                 }} 
                 value={value} 
                 placeholder="Enter Value" />
           {
            dispatch(incrementByValue(Number(value)));
            setValue("");
          }} className="w-40 h-10 p-2 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
            Add this Value
          
        
      
       {
        dispatch(reset());
        setValue("");
      }} className="w-20 h-10 p-2 text-white rounded-md outline-1 outline-violet-500

 outline mb-7 bg-violet-900">
        Reset
      
      

        Counter cannot be less than 0
      
    
  );
}

export default Counter;

7. Conclusión y referencias

Redux es una poderosa biblioteca para administrar el estado de sus aplicaciones. Al comprender las acciones, los reductores, la tienda y cómo conectar todo a sus componentes de React, puede crear aplicaciones predecibles y mantenibles.

Puntos clave:

• Acciones: Define lo que debe suceder en tu aplicación.
• Reductores: especifica cómo cambia el estado en respuesta a las acciones.
• Tienda: Mantiene el estado y maneja las acciones.
• Proveedor: Pasa la tienda a tus componentes de React.

Para obtener más información, consulta la documentación oficial de Redux:

• Documentación de Redux
• Documentación del kit de herramientas de Redux
• Documentación de React-Redux

Al seguir esta guía, deberías tener un conocimiento sólido de Redux y poder implementarlo en tus propias aplicaciones.