Logika asynchroniczna z createAsyncThunk

Wprowadzenie

Czym jest createAsyncThunk?

Definiowanie thunk

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

Obsługa w extraReducers

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

Wysyłanie thunk

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

Dostęp do stanu w thunk

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

Obsługa błędów za pomocą rejectWithValue

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

Anulowanie thunków

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

Oczekiwanie na wysłany thunk

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

Notacja buildera a notacja obiektowa

Szybkie sprawdzenie

Podsumowanie

Następna lekcja