PricingLoginStart free
Frontend Academy · Lektion

Redux Toolkit: createSlice og configureStore

Definér state slices med createSlice, kombinér dem i configureStore, og dispatch actions fra React-komponenter med useDispatch og useSelector.

Lektion 1 af 413 trin

Redux Toolkit: createSlice og configureStore er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvorfor Redux Toolkit?

Redux Toolkit (RTK) er den officielle tilgang med faste anbefalinger til at skrive Redux-logik. Den fjerner standardkoden fra almindelig Redux: ingen manuelle strenge til action-typer, ingen lange reducers og ingen kompleks opsætning af storet.

Installation af Redux Toolkit

Installér både RTK og React-bindingen.

npm install @reduxjs/toolkit react-redux

createSlice — Tilstand + reducer + actions

createSlice opretter en del af tilstanden med dens reducer og action creators i ét kald. Internt bruger den Immer til uforanderlige opdateringer.

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value++; },     // Immer: mutate directly
    decrement: state => { state.value--; },
    reset: state => { state.value = 0; },
    incrementBy: (state, action) => { state.value += action.payload; }
  }
});

export const { increment, decrement, reset, incrementBy } = counterSlice.actions;
export default counterSlice.reducer;

configureStore — Samling af storet

configureStore opretter Redux-storet med fornuftige standardindstillinger: Redux DevTools er aktiveret, og thunk-middleware er inkluderet.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
import cartReducer from './cartSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    cart: cartReducer,
  }
});

// TypeScript types:
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Levering af storet

Pak din app ind i <Provider store={store}> fra react-redux.

import { Provider } from 'react-redux';
import { store } from './store';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <App />
  </Provider>
);

useSelector — Læsning af tilstand

useSelector(selector) læser fra storet. Den renderer komponenten igen, når den valgte del ændres.

import { useSelector } from 'react-redux';
import type { RootState } from './store';

function Counter() {
  const count = useSelector((state: RootState) => state.counter.value);
  return <p>Count: {count}</p>;
}

useDispatch — Afsendelse af actions

useDispatch() returnerer storets dispatch-funktion. Kald den med en action creator for at udløse en ændring af tilstanden.

import { useDispatch } from 'react-redux';
import { increment, incrementBy } from './counterSlice';

function Controls() {
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(incrementBy(5))}>+5</button>
    </div>
  );
}

createAsyncThunk — Asynkrone actions

RTK's createAsyncThunk håndterer asynkrone operationer (API-kald) og afsender automatisk actions med statuserne pending/fulfilled/rejected.

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

export const fetchUser = createAsyncThunk(
  'user/fetchById',
  async (userId: string) => {
    const res = await fetch(`/api/users/${userId}`);
    return res.json(); // becomes action.payload on fulfilled
  }
);

// In slice:
extraReducers: (builder) => {
  builder
    .addCase(fetchUser.pending, state => { state.loading = true; })
    .addCase(fetchUser.fulfilled, (state, action) => {
      state.loading = false;
      state.user = action.payload;
    });
}

RTK Query — Indbygget datahentning

RTK Query (en del af RTK) leverer automatisk datahentning, cachelagring og ugyldiggørelse. Definér API-endepunkter, og få genererede hooks.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (build) => ({
    getUsers: build.query<User[], void>({ query: () => 'users' }),
  })
});

// Generated hook:
const { data, isLoading, error } = api.useGetUsersQuery();

Immer i reducers

RTK bruger Immer internt, så slice-reducers kan ændre tilstanden direkte. Immer registrerer ændringerne og producerer et nyt uforanderligt tilstandsobjekt – du får brugervenligheden ved mutationer kombineret med sikkerheden ved uforanderlighed.

Redux DevTools

Browserudvidelsen Redux DevTools lader dig undersøge hver afsendt action, den resulterende tilstand og endda foretage tidsrejser: gå til en hvilken som helst tidligere tilstand. Det er uvurderligt ved fejlfinding af komplekse tilstandsforløb.

Hurtigt tjek

Hvad genererer createSlice automatisk i Redux Toolkit?

Besvar den i den interaktive lektion

Opsummering: Redux Toolkit

createSlice samler reducer + actions i én definition. Immer lader dig ændre tilstanden sikkert. configureStore samler reducers med DevTools + thunk. useSelector læser tilstanden. useDispatch afsender actions. createAsyncThunk bruges til asynkrone forløb. RTK Query bruges til komplet datahentning med cachelagring.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
41
Lektioner
163
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Redux Toolkit: createSlice og configureStore” gratis?

Ja — hele teksten til “Redux Toolkit: createSlice og configureStore” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Redux Toolkit: createSlice og configureStore”?

Definér state slices med createSlice, kombinér dem i configureStore, og dispatch actions fra React-komponenter med useDispatch og useSelector. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Redux Toolkit: createSlice og configureStore”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Redux Toolkit: createSlice og configureStore
  2. Zustand til letvægts-React-state
  3. Pinia til Vue: defineStore og storeToRefs
  4. Hvornår skal global eller lokal state bruges
← Tilbage til Frontend Academy