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

Footer