Redux

Redux es una librería de JavaScript que se utiliza para el manejo del estado en aplicaciones web. Se basa en el patrón de diseño de aplicación denominado Single Source of Truth (SSOT, fuente única de verdad), que consiste en tener un único lugar en el que se almacena y gestiona toda la información necesaria para la aplicación. Esto permite que sea más fácil predecir cómo cambiará la aplicación a medida que los usuarios interactúen con ella y facilita el desarrollo de aplicaciones más grandes y complejas.

En el contexto de Redux, el estado de la aplicación se almacena en un único lugar llamado «store», y para modificar el estado, se deben enviar «acciones» al store, que describe cómo se debe modificar el estado. El store ejecuta entonces una «función reductora» que actualiza el estado de la aplicación en función de la acción recibida. Esto permite que el estado de la aplicación sea predecible y controlado de manera centralizada.

Redux es ampliamente utilizado en conjunción con aplicaciones basadas en React, pero también se puede utilizar con otras librerías y marcos de JavaScript. Es especialmente útil en aplicaciones que tienen un estado complejo y que necesitan una gestión centralizada del mismo.

Aquí tienes un ejemplo sencillo de cómo se podría utilizar Redux con TypeScript en una aplicación basada en React:

Primero, se necesitaría instalar las dependencias necesarias:

npm install redux @types/redux react-redux @types/react-redux

A continuación, se puede crear una acción para añadir un elemento a una lista:

import { Action } from 'redux';

export enum ActionTypes {
  AddItem = 'ADD_ITEM',
}

export interface AddItemAction extends Action {
  type: ActionTypes.AddItem;
  payload: string;
}

export function addItem(item: string): AddItemAction {
  return {
    type: ActionTypes.AddItem,
    payload: item,
  };
}

Luego, se puede crear una función reductora que maneje la acción de añadir un elemento a la lista:

import { Reducer } from 'redux';
import { ActionTypes, AddItemAction } from './actions';

export interface State {
  items: string[];
}

const initialState: State = {
  items: [],
};

export const reducer: Reducer<State, AddItemAction> = (state = initialState, action) => {
  switch (action.type) {
    case ActionTypes.AddItem:
      return {
        ...state,
        items: [...state.items, action.payload],
      };
    default:
      return state;
  }
};

Finalmente, se puede crear un store de Redux y utilizarlo en un componente de React:

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { reducer } from './reducer';
import { addItem } from './actions';

const store = createStore(reducer);

function App() {
  const handleClick = () => {
    store.dispatch(addItem('nuevo elemento'));
  };

  return (
    <Provider store={store}>
      <button onClick={handleClick}>Añadir elemento</button>
      <ul>
        {store.getState().items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </Provider>
  );
}

Cuando se haga clic en el botón, se enviará una acción de tipo ADD_ITEM al store, lo que causará que se ejecute la función reductora y se añada un nuevo elemento a la lista.

Ver tambien: Redux Toolkit