Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Oprettelse af Global Tilstand for Appen | Opbygning af en Reel Applikation med Redux Toolkit
Tilstandshåndtering med Redux Toolkit i React

bookOprettelse af Global Tilstand for Appen

Stryg for at vise menuen

Opret filen:

src/features/tasks/tasksSlice.js

Tilføj det indledende 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;

Forbind det nu til store:

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

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

Du har oprettet et slice til at håndtere opgaver og forbundet det til store. Applikationen har nu et centralt sted, hvor alle opgavedata findes og kan opdateres.

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 7. Kapitel 2

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Sektion 7. Kapitel 2
some-alt