• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Geekebrains

Para programadores, maker y geeks en general

  • Inicio
  • Zona Coders!
  • Zona makers!
  • Zona Junior!
You are here: Home / Qué es ...? / Redux

17 diciembre, 2022 Por Editor Leave a Comment

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

Filed Under: Qué es ...?, Zona Coders! Tagged With: javascript, Librerías de JavaScript, ReactJS

Previous Post: « Patrón de Arquitectura Flux
Next Post: Patrón Middleware »

Reader Interactions

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Primary Sidebar

Categorías

  • Cómo …?
  • Experimentos
  • GeekeBlocks
  • Noticias Geek
  • Proyectos
  • Qué es …?
  • Quién es …?
  • Zona Coders!
  • Zona Junior!
  • Zona makers!

Etiquetas

Arduino Arquitectura de software base64 Bases de Datos cer cert Certificados Digitales Clean Code Code Smells Cordova DBeaver Diseño de Software docker docker-compose Domain Drive Design Edición de video https IDE Java javascript jest lenguajes de programación Librerías de JavaScript linux MongoDb MySQL NodeJS NoSQL odoo Open Source openssl Oracle package.json Patrones de Diseño de Software pem plugins Postgres Prettier ReactJS Refactoring shell SSL TypeScript utilidades de software Visual Studio Code

Entradas recientes

  • NestJs
  • Docker-compose y mongoDB: Failed to start up WiredTiger under any compatibility version?
  • Ponerle nombre a las cosas: camelCase, snake_case, kebab-case, PascalCase, MACRO_CASE y Train_Case
  • OBS – Open Broadcaster Software
  • Duck typing
  • Patrón de arquitectura: Backend for Frontend – BFF
  • SaaS, PaaS y IaaS
  • Notion
  • GitHub Actions
  • MockServer

Jesús A. Carballo Santaclara

Empezé trasteando en los 80' con un mi primer ZX espectrum, en los 90' con un PC 8086 (...) y el resto es una larga historia.
Trabajo de forma profesional en esto de los ordenadores desde hace mas de 25 años y tengo unas cuantas aventuras que podría gustarte oir.

Footer

Copyright © 2023 · GeekeZonia · Aviso Legal · Política de Cookies · Política de Privacidad · Log in