Redux - biblioteca JavaScript

¿Qué es Redux?

• Redux es un contenedor de estado predecible diseñado para ayudarlo a escribir aplicaciones JavaScript que se comportan de manera consistente en entornos de cliente, servidor y nativos y son fáciles de probar.
• Redux fue creado por Dan Abramov alrededor de junio de 2015. Se inspiró en Flux de Facebook y el lenguaje de programación funcional Elm. Redux se hizo popular muy rápidamente debido a su simplicidad , tamaño pequeño (solo 2 KB) y excelente documentación .

La predictibilidad de Redux está determinada por los tres principios más importantes que se indican a continuación:

1. Fuente única de la verdad: el estado de toda su aplicación se almacena en un árbol de objetos dentro de una sola tienda . Como todo el estado de la aplicación se almacena en un solo árbol, la depuración es fácil y el desarrollo más rápido.
2. 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 significa que nadie puede cambiar directamente el estado de su aplicación.
3. Los cambios se realizan con funciones puras: para especificar cómo el árbol de estado se transforma mediante acciones, escribe reductores puros . Un reductor es un lugar central donde tiene lugar la modificación del estado. Un reductor es una función que toma el estado actual y la acción a realizar. La función debe devolver un estado recién actualizado, no una versión modificada del estado existente .

Redux tiene tres partes de construcción: acciones , tienda y reductores .

Acciones en Redux

En pocas palabras, las acciones son eventos . Son la única forma en que puede enviar datos desde su aplicación a su tienda Redux. Los datos pueden provenir de interacciones de usuarios, eventos internos como llamadas a API o incluso envíos de formularios.

• Las acciones son objetos simples de JavaScript y deben tener una propiedad de tipo (generalmente constante) para indicar el tipo de acción a realizar. También deben tener una carga útil que contenga la información en la que debería trabajar la acción.

{ 
  type: "LOGIN",
  payload: {
    username: "Ayush",
    password: "12345"
  }
}

const setLoginStatus = (name, password) => {
  return {
    type: "LOGIN",
    payload: {
      username: "Ayush",
      password: "12345"
    }
  }
}

store.dispatch(setLoginStatus(name, password));

• Es el único lugar donde puede escribir lógica y cálculos. La función reductora aceptará el estado anterior de la aplicación y la acción que se está enviando, calculará el siguiente estado y devolverá el nuevo objeto.
• Las siguientes cosas nunca deben realizarse dentro del reductor: mutación de argumentos de funciones, llamadas a API y lógica de enrutamiento, y llamadas a funciones no puras, por ejemplo, Math.random ()
• Se basa en la reducefunción en JavaScript, donde se calcula un solo valor a partir de múltiples valores después de que se ha llevado a cabo una función de devolución de llamada.

Redux reducer signature
(previousState, action) => nextState
Array.prototype.reduce signature
(accumulator, value) => (accumulator + value)
Example:
const handleAuth = (state = initialState, action) => {
    switch (action.type) {

      // This reducer handles any action with type "LOGIN"
      case "LOGIN":
          return state.map(user => {
              if (user.username !== action.payload.username) {
                  return user;
              }

              if (user.password == action.payload.password) {
                  return {
                      ...user,
                      login_status: "LOGGED IN"
                  }
              }
          });
        default:
          return state;
      } 
};

• Para aplicaciones más complejas, combineReducers()es posible usar la utilidad, proporcionada por Redux (de hecho, se recomienda). Combina todos los reductores de la aplicación en un solo reductor de índice. Cada reductor es responsable de su propia parte del estado de la aplicación, y el parámetro de estado es diferente para cada reductor. La combineReducers()utilidad hace que la estructura del archivo sea mucho más fácil de mantener.

const rootReducer = combineReducers({
    handleAuth: handleAuth,
    editProfile: editProfile,
    changePassword: changePassword
});

• Permite el acceso al estado vía getState();
• Permite actualizar el estado mediante dispatch(action);
• Registra a los oyentes a través de subscribe(listener);
• Maneja la cancelación del registro de oyentes a través de la función devuelta por subscribe(listener).
• createStore : la función puede tener tres argumentos. Un reductor es una función que devuelve el siguiente estado de la aplicación. Un preloadedState es un argumento opcional y es el estado inicial de su aplicación. Un potenciador también es un argumento opcional. Le ayudará a mejorar la tienda con capacidades de terceros.

Syntax - createStore(reducer, [preloadedState], [enhancer])
Example:
import { createStore } from ‘redux’;
import rootReducer from './reducers/index';
const store = createStore(rootReducer);

store.dispatch(setLoginStatus(‘alex’, ‘123456’));

• Redux en sí es sincrónico, entonces, ¿cómo funcionan las operaciones asíncronas como las solicitudes de red con Redux? Aquí los middlewares son útiles.

• Como se discutió anteriormente, los reductores son el lugar donde se escribe toda la lógica de ejecución. Reducer no tiene nada que ver con quién lo realiza, cuánto tiempo está tomando o registrando el estado de la aplicación antes y después de que se envíe la acción. En este caso, la función de middleware de Redux proporciona un medio para interactuar con la acción enviada antes de que lleguen al reductor.
• Normalmente, los middlewares se utilizan para gestionar acciones asincrónicas en su aplicación. Redux proporciona una API llamada applyMiddleware que nos permite usar middleware personalizado así como middlewares de Redux como redux-thunk y redux-saga . Y esto se puede aplicar para almacenar de la siguiente manera:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(rootReducer, applyMiddleware(thunk));

function getUser() {
   return function() {
      return axios.get('/get_user_details');
   };
}

Syntax - ({ getState, dispatch }) => next => action
function simpleMiddleware({ getState, dispatch }) {
  return function(next){
    return function(action){
      // processing
      const nextAction = next(action);
      // read the next state
      const state = getState();
      // return the next action or you can dispatch any other action
      return nextAction;  
    }
  }
}
const store = createStore(rootReducer , initialState=[ ] , applyMiddleware(simpleMiddleware));

• Previsibilidad del resultado: siempre hay una fuente de verdad, la tienda, sin confusión sobre cómo sincronizar el estado actual con las acciones y otras partes de la aplicación.
• Capacidad de mantenimiento: tener un resultado predecible y una estructura estricta hace que el código sea más fácil de mantener. Esto también le ayuda a segregar su lógica empresarial de su árbol de componentes. Para aplicaciones a gran escala, es fundamental mantener su aplicación más predecible y fácil de mantener.
• Organización: Redux es más estricto acerca de cómo se debe organizar el código, lo que hace que el código sea más consistente y más fácil de trabajar para un equipo.
• Procesamiento del servidor: esto es muy útil, especialmente para el procesamiento inicial, lo que mejora la experiencia del usuario o la optimización del motor de búsqueda. Simplemente pase la tienda creada en el servidor al lado del cliente.
• Herramientas para desarrolladores : los desarrolladores pueden rastrear todo lo que sucede en la aplicación en tiempo real, desde acciones hasta cambios de estado. Le brinda edición de código en vivo combinada con un depurador que viaja en el tiempo.
• Comunidad y ecosistema: esta es una gran ventaja cada vez que aprende o usa cualquier biblioteca o marco. Tener una comunidad detrás de Redux hace que su uso sea aún más atractivo.
• Facilidad de prueba: la primera regla para escribir código comprobable es escribir pequeñas funciones que hagan solo una cosa y que sean independientes. El código de Redux son principalmente funciones que son solo eso: pequeñas, puras y aisladas.
• Beneficios de rendimiento: puede suponer que mantener el estado de la aplicación global daría lugar a una degradación del rendimiento. En gran medida, ese no es el caso. React Redux implementa muchas optimizaciones de rendimiento internamente para que su propio componente conectado solo se vuelva a reproducir cuando realmente lo necesite.

• Un último paso útil para trabajar con Redux es instalar e iniciar las propias herramientas de desarrollo de Redux. Si está utilizando Chrome, puede habilitar Redux DevTools siguiendo el enlace a continuación:
• Pero hay un paso más para que funcione. En nuestro createStoremétodo, tenemos que pasar a la siguiente como argumento después de nuestro reductor: window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()(). Con esa adición, store.jsdebería verse así:

import { createStore } from 'redux';
import reducer from './reducers';
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;