Frontend Academy · leksjon

Redux Toolkit: createSlice og configureStore

Definer state-slices med createSlice, kombiner dem i configureStore, og send actions fra React-komponenter med useDispatch og useSelector.

Leksjon 1 av 413 trinn

Redux Toolkit: createSlice og configureStore er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hvorfor Redux Toolkit?

Redux Toolkit (RTK) er den offisielle, konvensjonsstyrte måten å skrive Redux-logikk på. Det fjerner standardkoden i vanlig Redux: ingen manuelle strenger for action-typer, ingen omstendelige reducers og ingen komplisert store-konfigurering.

Installere Redux Toolkit

Installer både RTK og React-bindingen.

npm install @reduxjs/toolkit react-redux

createSlice – tilstand + reducer + actions

createSlice oppretter en del av tilstanden med tilhørende reducer og action creators i ett kall. Under panseret bruker den Immer for uforanderlige oppdateringer.

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 – sette sammen store

configureStore oppretter Redux-store med fornuftige standardinnstillinger: Redux DevTools er aktivert, og thunk-middleware er inkludert.

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;

Tilby store

Pakk appen inn med <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 – lese tilstand

useSelector(selector) leser fra store. Komponenten gjengis på nytt når den valgte delen av tilstanden endres.

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 – sende actions

useDispatch() returnerer stores dispatch-funksjon. Kall den med en action creator for å utløse en endring i 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

RTKs createAsyncThunk håndterer asynkrone operasjoner (API-kall) og sender automatisk pending-, fulfilled- og rejected-actions.

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 – innebygd datainnhenting

RTK Query (en del av RTK) tilbyr automatisk datainnhenting, hurtigbufring og ugyldiggjøring. Definer API-endepunkter og få genererte 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 bruker Immer internt, slik at slice-reducers kan endre tilstanden direkte. Immer oppdager endringene og produserer et nytt, uforanderlig tilstandsobjekt – De får enkelheten ved mutering med sikkerheten til uforanderlighet.

Redux DevTools

Nettleserutvidelsen Redux DevTools lar Dem inspisere hver action som sendes, den resulterende tilstanden og til og med reise gjennom tiden: gå tilbake til hvilken som helst tidligere tilstand. Den er uvurderlig ved feilsøking av komplekse tilstandsforløp.

Hurtigsjekk

Hva genererer createSlice i Redux Toolkit automatisk?

Besvar den i den interaktive leksjonen

Oppsummering: Redux Toolkit

createSlice kombinerer reducer og actions i én definisjon. Immer lar Dem trygt «mutere» tilstanden. configureStore setter sammen reducers med DevTools og thunk. useSelector leser tilstand. useDispatch sender actions. createAsyncThunk brukes til asynkrone forløp. RTK Query brukes til fullstendig datainnhenting med hurtigbufring.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Redux Toolkit: createSlice og configureStore» gratis?

Ja – hele teksten i «Redux Toolkit: createSlice og configureStore» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Redux Toolkit: createSlice og configureStore»?

Definer state-slices med createSlice, kombiner dem i configureStore, og send actions fra React-komponenter med useDispatch og useSelector. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Redux Toolkit: createSlice og configureStore»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Redux Toolkit: createSlice og configureStore
Zustand for lettvekts React-state
Pinia for Vue: defineStore og storeToRefs
Når skal global eller lokal state brukes

← Tilbake til Frontend Academy