Asynchrone Logik mit createAsyncThunk

Willkommen

Was ist createAsyncThunk?

Einen Thunk definieren

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
  }
);

In extraReducers verarbeiten

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;
    });
}

Den Thunk dispatchen

const dispatch = useDispatch();
useEffect(() => {
  dispatch(fetchUser(userId));
}, [userId]);

Auf den State im Thunk zugreifen

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());
  }
);

Fehler mit rejectWithValue verarbeiten

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

Thunks abbrechen

async (id, { signal }) => {
  const res = await fetch('/api/' + id, { signal });
  return res.json();
}

Auf einen dispatchten Thunk warten

const result = await dispatch(saveItem(data));
if (saveItem.fulfilled.match(result)) {
  navigate('/success');
}

Builder-Notation vs. Objekt-Notation

Kurztest

Zusammenfassung

Als Nächstes