PricingLoginStart free
React Academy · Lektion

Asynkron logik med createAsyncThunk

Håndtér API-kald i Redux med createAsyncThunk og livscyklussen pending/fulfilled/rejected.

Lektion 2 af 413 trin

Asynkron logik med createAsyncThunk er en gratis React Academy-lektion på CoddyKit. Dette er lektion 2 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 React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion lærer du at håndtere API-kald i Redux med createAsyncThunk og håndtere pending-, fulfilled- og rejected-livscyklushandlingerne i dit slice.

Hvad er createAsyncThunk?

createAsyncThunk genererer en thunk-baseret handlingsskaber, der automatisk sender tre livscyklushandlinger: pending (startet), fulfilled (gennemført) og rejected (mislykket). Du håndterer dem hver især i extraReducers.

Definition af en thunk

Kald createAsyncThunk med en typestreng og en asynkron funktion, der opretter payloaden. Returnér de data, du vil have som payload ved fulfilled.
import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk(
  'users/fetchById',
  async (userId) => {
    const response = await fetch('/api/users/' + userId);
    return response.json(); // becomes action.payload on fulfilled
  }
);

Håndtering i extraReducers

Tilføj tilfælde for alle tre livscyklustilstande i slicets extraReducers. Håndter indlæsnings-, data- og fejltilstanden derefter.
extraReducers: (builder) => {
  builder
    .addCase(fetchUser.pending, state => {
      state.loading = true;
      state.error = null;
    })
    .addCase(fetchUser.fulfilled, (state, action) => {
      state.loading = false;
      state.user = action.payload;
    })
    .addCase(fetchUser.rejected, (state, action) => {
      state.loading = false;
      state.error = action.error.message;
    });
}

Afsendelse af thunk'en

Send thunk'en fra en komponent med useDispatch. Giv argumenter direkte til thunk-handlingsskaberen.
const dispatch = useDispatch();
useEffect(() => {
  dispatch(fetchUser(userId));
}, [userId]);

Adgang til tilstanden i thunk'en

Funktionen, der opretter payloaden, modtager et thunkAPI-objekt som sit andet argument. Brug thunkAPI.getState() til at læse den aktuelle Redux-tilstand og thunkAPI.dispatch() til at sende andre handlinger.
export const saveItem = createAsyncThunk(
  'items/save',
  async (item, { getState }) => {
    const { auth } = getState();
    return fetch('/api/items', {
      method: 'POST',
      headers: { Authorization: 'Bearer ' + auth.token },
      body: JSON.stringify(item),
    }).then(r => r.json());
  }
);

Håndtering af fejl med rejectWithValue

Hvis du vil sende en brugerdefineret fejl-payload til det afviste tilfælde, skal du bruge thunkAPI.rejectWithValue(). Den afviste handlings action.payload indeholder dit brugerdefinerede fejlobjekt.
export const fetchData = createAsyncThunk(
  'data/fetch',
  async (id, { rejectWithValue }) => {
    const res = await fetch('/api/' + id);
    if (!res.ok) return rejectWithValue({ status: res.status });
    return res.json();
  }
);
// In rejected case: action.payload.status is available

Annullering af thunks

Send et AbortController-signal til dit fetch-kald inde i thunk'en. createAsyncThunk stiller automatisk signal til rådighed via thunkAPI.signal, når thunk'en annulleres med dispatch.abort().
async (id, { signal }) => {
  const res = await fetch('/api/' + id, { signal });
  return res.json();
}

Afventning af en afsendt thunk

dispatch() af en thunk returnerer et Promise. Du kan bruge await på det for at vide, hvornår det asynkrone arbejde er afsluttet, hvilket er nyttigt i mønstre, hvor du omdirigerer efter lagring.
const result = await dispatch(saveItem(data));
if (saveItem.fulfilled.match(result)) {
  navigate('/success');
}

Builder-notation kontra objektnotation

Brug builder.addCase-callbackmønsteret i extraReducers — det er typesikkert og understøttet. Den ældre objektnotation med nøgler er udfaset i nyere RTK-versioner.

Hurtigt tjek

Hvad sker der, når den asynkrone funktion inde i createAsyncThunk kaster en fejl?
Besvar den i den interaktive lektion

Opsummering

createAsyncThunk genererer automatisk pending-, fulfilled- og rejected-handlinger. Håndter alle tre i extraReducers. Brug rejectWithValue til brugerdefinerede fejl-payloads og thunkAPI.getState() til at få adgang til den aktuelle tilstand inde i thunks.

Næste trin

Næste lektion: **RTK Query: Endpoints og automatisk cachelagring** — du vil definere API-endpoints med createApi og lade RTK Query håndtere cachelagringen automatisk.
Gratis at komme i gang

Lær React 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
88
Lektioner
324
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Asynkron logik med createAsyncThunk” gratis?

Ja — hele teksten til “Asynkron logik med createAsyncThunk” 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 React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Asynkron logik med createAsyncThunk”?

Håndtér API-kald i Redux med createAsyncThunk og livscyklussen pending/fulfilled/rejected. Du øver dig i React 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å React Academy?

Der kræves ingen tidligere erfaring. React 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 2 af 4.

Hvor lang tid tager lektionen “Asynkron logik med createAsyncThunk”?

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 React Academy-lektion?

Ja. Alle React 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-slices og createSlice
  2. Asynkron logik med createAsyncThunk
  3. RTK Query: Endpoints og automatisk caching
  4. Optimistiske opdateringer og ugyldiggørelse af cache
← Tilbage til React Academy