¿Cómo es el flujo típico de datos en una aplicación React with Redux?

Redux es una biblioteca JavaScript de administración de estado de código abierto para administrar el estado de la aplicación. Se usa popularmente ReactJS, pero no se limita a él, y también se puede usar con otras bibliotecas de JavaScript como Angular. En una aplicación React-Redux convencional, hay una sola tienda junto con un solo reductor de raíz. A medida que la aplicación se vuelve más compleja, el reductor raíz se divide en reductores más pequeños que operan en las diferentes partes del árbol de estado.

Para las aplicaciones de nivel de producción a gran escala, reproducir problemas y agregar nuevas funciones resulta ser una tarea compleja si el estado de la aplicación no se administra de manera eficiente y no tiene control sobre él. Redux reduce la complejidad del código al facilitar el proceso de actualización de estado.

Flujo de datos en una aplicación React-Redux

Hay cuatro conceptos fundamentales que rigen el flujo de datos en las aplicaciones React-Redux.

1. Tienda Redux: La tienda Redux, en pocas palabras, es un objeto que contiene el estado de la aplicación. Una tienda redux puede consistir en pequeños objetos de estado que se combinan en un objeto grande. Cualquier componente de la aplicación puede acceder fácilmente a este estado (almacenar) conectándose a él a través del método de conexión.
2. Creadores de acciones: los creadores de acciones, como su nombre indica, son funciones que devuelven acciones (objetos). Los creadores de acciones se invocan cuando el usuario interactúa con la aplicación a través de su interfaz de usuario (clic de botón, envío de formulario, etc.) o en ciertos puntos del ciclo de vida de un componente (montajes de componentes, desmontajes de componentes, etc.).
3. Acciones: Las acciones son objetos simples que convencionalmente tienen dos propiedades: tipo y carga útil. La propiedad de tipo suele ser una string que especifica identifica la acción, y la carga útil es una propiedad opcional que contiene algunos datos necesarios para realizar cualquier tarea en particular. La función principal de la acción es enviar datos desde la aplicación a la tienda Redux.
4. Reductores: Los reductores son funciones puras que actualizan el estado de la aplicación en respuesta a las acciones. Los reductores toman un estado anterior y una acción como entrada y devuelven una versión modificada del estado. Dado que el estado es inmutable, un reductor siempre devuelve un nuevo estado, que es una versión actualizada del estado anterior.

Flujo de aplicación de React-Redux

• El flujo de datos en una aplicación React-Redux comienza en el nivel de componente cuando el usuario interactúa con la interfaz de usuario de la aplicación. Esta interacción lleva a los creadores de la acción a enviar una acción.
• Cuando se envía una acción, el reductor raíz de la aplicación la recibe y se pasa a todos los reductores. Por lo tanto, se convierte en tarea del reductor determinar si necesita actualizar el estado en función de la acción enviada.
• Esto se verifica mediante una declaración de cambio simple para filtrar las acciones requeridas. Cada reductor (más pequeño) en la aplicación acepta la acción enviada y si el tipo de acción enviada coincide, devuelve un estado recién actualizado.
• Es esencial notar aquí que el estado en realidad nunca cambia en redux. En cambio, el reductor siempre genera un nuevo estado que es una copia del estado anterior, pero con algunas modificaciones.
• Luego, la tienda informa al componente sobre el nuevo estado que, a su vez, recupera el estado actualizado y vuelve a representar el componente.
• Otra observación importante aquí es que el flujo de datos en una aplicación React-Redux es unidireccional, es decir, solo va en una dirección.

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app react-with-redux

• Paso 2: después de crear la carpeta de su proyecto, es decir, reaccionar con redux, muévase a ella con el siguiente comando:

  cd react-with-redux

Estructura del proyecto: Tendrá el siguiente aspecto:

Ejemplo: ahora escriba el siguiente código en su archivo App.js. Aquí, App es el componente predeterminado donde hemos escrito nuestro código.

import React, { Component } from "react";
import "./App.css";
import { GetMessage } from "./action/showMessageAction";
import { connect } from "react-redux";
class App extends Component {
  showMessage = () => {
    console.log("CALLING ACTION");
    this.props.getMessage();
  };
  
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h3>Flow of data in a React-Redux app</h3>
          <button onClick={this.showMessage}>
            Click me to trigger an action!{" "}
          </button>
          <h5>
            The updated state will be displayed here: {this.props.message}
          </h5>{" "}
        </header>
      </div>
    );
  }
}
  
const mapActionsToProps = {
  getMessage: GetMessage,
};
  
const mapStateToProps = (state) => {
  return { message: state.data.message };
};
  
export default connect(mapStateToProps, mapActionsToProps)(App);

import { combineReducers } from "redux";
import showMessageReducer from "./showMessageReducer";
  
const combinedReducers = combineReducers({ data: showMessageReducer });
  
export default combinedReducers;

export const SHOW_MESSAGE = "SHOW_MESSAGE";
  
export const GetMessage = () => {
  console.log("DISPATCHING ACTION");
  return {
    type: SHOW_MESSAGE,
    payload: { message: "Hello from GeeksforGeeks!" },
  };
};

import { SHOW_MESSAGE } from "../action/showMessageAction";
  
const showMessageReducer = (
  state = { message: "No message" },
  { type, payload }
) => {
  switch (type) {
    case SHOW_MESSAGE:
      console.log("STATE UPDATION");
      return payload;
  
    default:
      return state;
  }
};
  
export default showMessageReducer;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción: