Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Oppretting av global tilstand for appen | Bygge en Ekte Applikasjon med Redux Toolkit
Tilstandshåndtering med Redux Toolkit i React

bookOppretting av global tilstand for appen

Sveip for å vise menyen

Opprett filen:

src/features/tasks/tasksSlice.js

Legg til den innledende slicen:

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;

Koble den nå til store:

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

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

Du har opprettet en slice for å håndtere oppgaver og koblet den til store. Applikasjonen har nå et sentralt sted hvor all oppgavedata lagres og kan oppdateres.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 7. Kapittel 2

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Seksjon 7. Kapittel 2
some-alt