Redux Fundamentals

Asynchronous Actions – Creating Async Thunks in Redux Toolkit

Redux Fundamentals Videos ▶️ 

Creating Async Thunks in Redux Toolkit

A thunk is a fancy way of saying you're going to dispatch a function that is eventually going to dispatch an action.

Redux toolkit comes with a nice way of seeing that play out.

const ENDPOINT = "https://star-wars-characters.glitch.me/api/search/";

export const fetchCharactersFromAPI = createAsyncThunk(
  "characters/fetchCharacters",
  async (searchTerm) => {
    const response = await fetch(
      ENDPOINT + searchTerm.toLowerCase()
    ).then((response) => response.json());
    return response.results;
  }
);

In extraReducers we add the following:

export const charactersSlice = createSlice({
  name: "characters",
  initialState,
  extraReducers: {
    [fetchCharactersFromAPI.fulfilled]: (state, action) => {
      state.data = action.payload;
    },
  },
});

Exercise

Can you listen for fetchCharactersFromAPI.pending and turn the loading on and then turn it off then the promise is fulfilled?

You can see a solution here.