¿Cuáles son los tres principios que sigue Redux?

En el pasado, cuando el alboroto sobre el desarrollo de aplicaciones acababa de comenzar, la interfaz era fácil de lograr. Sin embargo, con un enfoque cada vez mayor en la experiencia del usuario final, la complejidad para desarrollar frontend está aumentando y se vuelve abrumadora.

Para satisfacer las demandas apremiantes y cambiantes de los usuarios de la nueva era, los desarrolladores de frontend miran a Vue para ayudarlos a superar los problemas de la complejidad. Además de esto, Angular y React son opciones posibles. Sin embargo, las aplicaciones frontend carecen de consistencia, lo que soportó la necesidad de un contenedor estable para las aplicaciones de JavaScript. Como resultado, se desarrolló redux para ayudar a los desarrolladores frontend a escribir aplicaciones para un comportamiento consistente. Además de esto, redux también ayuda a abordar los problemas de rendimiento de React.. Como resultado, Redux es constante cuando se trata de ejecutarse en diferentes entornos: nativo, servidor y cliente. Por lo general, Redux trabaja con React para eliminar los problemas que surgen con la administración del estado en aplicaciones masivas. Además, dado que React es problemático para reanudar los componentes, ya que está estrechamente relacionado con los componentes raíz, redux ayuda a reducir la complejidad. Además de esto, también ofrece accesibilidad global para crear aplicaciones fáciles de probar.

Llega a lo básico primero si recién estás comenzando con redux y quieres explorarlo en detalle.

Para comprender el núcleo de redux, solo necesita conocer tres principios.

1.  Redux es una fuente única de verdad: el estado global de una aplicación se almacena dentro de un árbol de objetos en una sola tienda. Como resultado, se vuelve más fácil crear aplicaciones universales debido a que el estado del servidor se serializa en el cliente sin códigos adicionales. Un solo árbol de estado, a su vez, facilita la inspección de una aplicación. Además de esto, también permite un ciclo de desarrollo más rápido y más corto. Además, algunas de las funcionalidades que tradicionalmente han sido difíciles de implementar, como Deshacer/Rehacer, pueden volverse triviales para la implementación cuando el estado está en un solo árbol.
2.  El estado es un estado de solo lectura: solo hay una forma de cambiar el estado: emitir una acción o un objeto que describa lo que sucedió. De acuerdo con el segundo principio, ni la red ni las devoluciones de llamada de las vistas escribirían jamás al estado. En lugar de eso, estos expresan la intención de la transformación de la forma. Dado que todos estos cambios están centralizados y solo pueden ocurrir en un orden estricto, no hay condiciones que buscar. Dado que las acciones son objetos simples, se pueden serializar, registrar, almacenar y luego reproducir para depurar o probar.
3. Las modificaciones se realizan con funciones puras: para especificar cómo se puede transformar el árbol de estado mediante acciones, puede escribir reductores puros. Los reductores son meramente funciones puras, que toman el estado anterior así como la acción y la mueven al siguiente estado. Debe recordar que debe volver a los nuevos objetos de estado además de mutar al último estado. Primero, debe comenzar con un reductor. Ahora, mientras su aplicación crece, puede dividirla en pequeños reductores, que pueden manejar partes específicas del árbol de estado. Dado que los reductores son simplemente funciones, debe controlar el orden, en el que el orden puede convertirse en reductores reutilizables para las tareas comunes.

Creación de la aplicación React y módulo de instalación:

Paso 1: Inicialmente, cree una aplicación React usando el comando mencionado a continuación:

npx create-react-app Principle

Paso 2: una vez que cree la carpeta con el nombre de carpeta apropiado, Principio, y siga con el siguiente comando:

cd Principle

Paso 3: Una vez que haya terminado de crear la aplicación ReactJS, instale los módulos con el comando mencionado a continuación:

npm install

Estructura del proyecto: Tendrá el siguiente aspecto:

Ejemplo: en el siguiente ejemplo, comenzamos con la capa de datos almacenando información. Según el primer principio, Redux es una tienda singular para compartir datos. Por lo tanto, comenzaremos con la creación de un singleton para el almacenamiento. Según el segundo principio, las funciones puras tienen la característica de ser predecibles. Estas funciones no tendrán llamadas de base de datos o llamadas de red. Cuando llamemos a funciones puras usando el mismo argumento o conjuntos de parámetros, se devolverá el mismo valor. El siguiente código debe escribirse en App.js. Además de esto, conectaremos la capa de vista con la capa de estado con React-Redux. En el siguiente código, el estado anterior cambiará cuando el usuario active una acción, lo que significa que volverá al nuevo estado.

import React from "react";
import { connect } from "react-redux";
  
const applyFilter = (searchFruite) => (article) => article
  .name.toLowerCase().includes(searchFruite.toLowerCase());
  
const App = ({ cricketerList, searchFruite, onSearch }) => (
  <div>
    <Search value={searchFruite} onSearch={onSearch}>
      <p>Search your favourite cricketer</p>
    </Search>
  
    <UL list={cricketerList.filter(applyFilter(searchFruite))} />
  </div>
);
  
const Search = ({ value, onSearch, children }) => (
  <div>
    {children}{" "}
    <input
      value={value}
      onChange={(event) => onSearch(event.target.value)}
      type="text"
    />
  </div>
);
  
const UL = ({ list }) => (
  <ul>
    {list.map((cricketer) => (
      <li key={cricketer.id}>
        <span>{cricketer.name}</span>
      </li>
    ))}
  </ul>
);
  
// Connecting view layer to state layer with react-redux
const mapStateToProps = (state) => ({
  cricketerList: state.cricketerState.cricketer,
  searchFruite: state.searchState.searchFruite,
});
  
const mapDispatchToProps = (dispatch) => ({
  onSearch: (searchFruite) =>
    dispatch({
      type: "SEARCH_SET",
      searchFruite,
    }),
});
  
export default connect(mapStateToProps, 
              mapDispatchToProps)(App);

Según el principio, todo el estado de su aplicación se puede representar como un objeto JavaScript unificado. Los siguientes datos se almacenarán en cricketerReducer.js.

const INITIAL_STATE = {
  cricketer: [
    { id: "0", name: "Rahul Sharma", type: "Spin Bolwer" },
    { id: "1", name: "Rahul Tewatia", type: "All-Rounder" },
    { id: "2", name: "Virat Kohli", type: "Batsman" },
    { id: "3", name: "Suresh Raina", type: "Batsman" },
    { id: "4", name: "KL Rahul", type: "Batsman - WK" },
    { id: "5", name: "Rohit Sharma", type: "Batsman" },
    { id: "6", name: "Deepak Chahar", type: "Fast Bowler" },
    { id: "7", name: "Ms Dhoni", type: "Batsman-WK" },
    { id: "8", name: "Ravindra Jadeja", type: "All-Rounder" },
    { id: "9", name: "Shardul Thakur", type: "Fast Bowler" },
    { id: "10", name: "Kuldip Yadav", type: "Spin Bowler" },
    { id: "11", name: "Sachin Tendulkar", type: "Batsman" },
  ],
};
  
function cricketerReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    default:
      return state;
  }
}
  
export default cricketerReducer;

const INITIAL_STATE = {
  searchFruite: "",
};
  
function searchReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case "SEARCH_SET":
      return { ...state, searchFruite: action.searchFruite };
    default:
      return state;
  }
}
  
export default searchReducer;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Salida: Abra el navegador y muévase a http://localhost:3000/ para ver la siguiente salida.