Introducción a React-Redux

Los que estén familiarizados con reaccionar sabrán que reaccionar es una herramienta de biblioteca frontal basada en componentes que conecta los diversos segmentos de la página web. En reaccionar, usamos props (abreviatura de propiedades) en un componente que permite el uso de variables no estáticas. Con la ayuda de props, podemos pasar estas variables a varios otros componentes (componentes secundarios) desde el componente principal.

Ejemplo: pasar accesorios del componente principal al componente secundario: 

import React, { Component } from 'react';
class App extends Component {
  render() {
    const wishes = 'Welcome to My World';
    return (
      <div>
        <Greeting wishes={wishes} />
      </div>
    );
  }
}
class Greeting extends Component {
  render() {
    return <h1>Welcome to {this.props.wishes} world!!</h1>;
  }
}
export default App;

La presencia del estado en react permite definir las propias variables de un componente. Con algunos componentes en nuestra aplicación, podemos pasar estos estados como accesorios a los componentes secundarios. Pero a medida que aumenta el número de componentes en la aplicación de acuerdo con su gran objetivo, necesitamos pasar este estado a otros componentes ubicados lejos unos de otros en el árbol de componentes. En este momento, la forma habitual de transferir el estado como accesorios resulta ser compleja, ya que no todos los componentes son padres del componente que requiere el estado.

Ejemplo: Inicializar el estado en un componente y pasarlo como accesorios a su componente secundario:  

class Parent extends Component{
 constructor(props){
  super(props);
  this.state={
   child1=0;
   child2=1;
  };
 }
 render()
 {
  return (
   <Child1 value={this.state.child1} />
   <Child2 value={this.state.child2} />
  );
 }
}

Esto trae la necesidad de react-redux en nuestra aplicación de reacción. React-redux, al ser una herramienta de administración de estado, facilita el paso de estos estados de un componente a otro, independientemente de su posición en el árbol de componentes y, por lo tanto, evita la complejidad de la aplicación.

Procedimiento de trabajo: cuando una aplicación de reacción contiene varios componentes que necesitan el estado de otros componentes, se vuelve difícil darse cuenta de dónde debe residir el estado entre estos componentes para que sea más fácil de mantener. React-redux proporciona una tienda que hace que el estado dentro de los componentes sea más fácil de mantener. Junto con las tiendas, react-redux introduce acciones y reductores que funcionan simultáneamente con las tiendas para hacer que el estado sea más predecible. El funcionamiento de las funciones en react-redux se explica a continuación: 

• Almacenar: Contiene el estado de los componentes que necesitan ser pasados ​​a otros componentes. La tienda hace que esta transmisión sea mucho más fácil, ya que ya no necesitamos mantener un estado dentro de un componente principal para pasar lo mismo a sus componentes secundarios.
• Acciones: la parte de acciones de react-redux básicamente contiene las diferentes acciones que se realizarán en el estado presente en la tienda. Las acciones incluidas deben contener el tipo de acción y también pueden contener carga útil (campo de datos en las acciones) .
  Ejemplo: acciones de incremento y decremento en una aplicación de reacción: 

export const increment = (num) => {
    return{
        type: 'INCREMENT',
        payload: num
    };
};
 
export const decrement = () => {
    return{
        type: 'DECREMENT',
    };
};

• Reductores: Los reductores en react-redux son las funciones puras que contienen las operaciones que deben realizarse en el estado. Estas funciones aceptan el estado inicial del estado que se está utilizando y el tipo de acción. Actualiza el estado y responde con el nuevo estado. Este estado actualizado se devuelve a los componentes de vista de la reacción para realizar los cambios necesarios. Un reductor debe contener el tipo de acción.
  Ejemplo: Reductor que actualiza el estado de acuerdo con el tipo de acción 1er programa y el 2do programa muestra el fragmento de creación de la tienda que acepta el reductor.
  Programa:1 

const counterReducer = (state=0, action) => {
 switch(action.type)
 {
  case 'INCREMENT':
   return state + action.payload;
  case 'DECREMENT':
   return state - 1;
  default:
   return state;
 }
};

• Programa:2 

import {createStore} from 'react-redux';
 
const store = createStore(
 counterReducer,
 window.__REDUX__DEVTOOLS__EXTENSIONS__ &&
    window.__REDUX__DEVTOOLS__EXTENSION__()
);

React-Redux necesario para: Como se muestra arriba, se nota claramente que el uso de react-redux introduce una gran cantidad de código repetitivo en nuestra aplicación solo con el propósito de pasar el estado de un componente a otro. Esto puede llevar a muchos nuevos estudiantes de react-redux a retirar su interés por el mismo. Independientemente de este hecho, muchos desarrolladores prefieren reaccionar-redux en su aplicación por las siguientes razones: 

• Reduce la complejidad del código: como se discutió anteriormente, cuando una aplicación tiene una gran cantidad de componentes que interactúan entre sí a través de su estado, se vuelve difícil administrar el paso del estado de un componente como accesorios a otro componente ubicado lejos en el árbol de componentes. React-redux con la introducción de la tienda mantiene el estado de los componentes de la aplicación y, por lo tanto, simplifica el código, ya que elimina la confusión de dónde debería haber residido el estado.
• Mantenibilidad más fácil: con la ayuda de la tienda, el estado ahora se encuentra en una posición en la aplicación, lo que facilita el mantenimiento cada vez que se actualiza el estado en varios componentes.
• Reduce el tiempo: React-redux actualiza las partes de una página en lugar de recargar toda la página y, por lo tanto, nos ahorra tiempo.
• Depuración sin esfuerzo: React-redux presenta reductores que son funciones puras que operan en el estado, lo que simplifica la lógica y ayuda a lograr una depuración sin esfuerzo.

Instalación: para instalar react-redux en su aplicación de reacción, ejecute el siguiente comando en la terminal:  

npm install react-redux

Referencia: https://react-redux.js.org/