Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Creating Global State for the App | Building a Real Application with Redux Toolkit
Gestión de Estado con Redux Toolkit en React

bookCreating Global State for the App

Desliza para mostrar el menú

Create the file:

src/features/tasks/tasksSlice.js

Add the initial slice:

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

const initialState = {
  items: []
};

const tasksSlice = createSlice({
  name: 'tasks',
  initialState,
  reducers: {
    addTask(state, action) {
      state.items.push(action.payload);
    },
    toggleTask(state, action) {
      const task = state.items.find((task) => task.id === action.payload);

      if (task) {
        task.completed = !task.completed;
      }
    },
    deleteTask(state, action) {
      state.items = state.items.filter((task) => task.id !== action.payload);
    }
  }
});

export const { addTask, toggleTask, deleteTask } = tasksSlice.actions;
export default tasksSlice.reducer;

Now connect it to the store:

import { configureStore } from '@reduxjs/toolkit';
import tasksReducer from '../features/tasks/tasksSlice';

export const store = configureStore({
  reducer: {
    tasks: tasksReducer
  }
});

You created a slice to manage tasks and connected it to the store. The application now has a central place where all task data lives and can be updated.

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 7. Capítulo 2

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Sección 7. Capítulo 2
some-alt