• 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 Toolkit

19 diciembre, 2022 Por Editor Leave a Comment

Redux Toolkit

Aquí hay un ejemplo de cómo se puede utilizar Redux Toolkit con TypeScript:

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

const initialState: TodoState = {
  todos: [],
};

const todoSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    addTodo(state, action: PayloadAction<Todo>) {
      state.todos.push(action.payload);
    },
    toggleTodo(state, action: PayloadAction<number>) {
      const todo = state.todos.find(t => t.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
  },
});

export const { addTodo, toggleTodo } = todoSlice.actions;
export default todoSlice.reducer;

En este ejemplo, se está utilizando Redux Toolkit para crear un «slice» de estado en el redux store que se llama «todos». El slice tiene una interfaz de estado que define una matriz de objetos «Todo» y un estado inicial que inicializa la matriz como vacía.

Luego, se utiliza el método createSlice de Redux Toolkit para crear un objeto de «slice» que contiene dos «reducers» (funciones que modifican el estado del slice). Los reducers son llamados «addTodo» y «toggleTodo», y se utilizan para agregar un nuevo elemento a la matriz de todos y para cambiar el estado completado de un todo específico.

Finalmente, se exportan las acciones del slice para que puedan ser utilizadas en el resto de la aplicación y se exporta el reducer del slice para que pueda ser utilizado en la configuración del store de Redux.

Ver tambien: Redux

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

Previous Post: « Software Dogmático – Opinionated software
Next Post: Patrón Unidad de Trabajo -Unit Of Work (UOW) »

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