How to Use Thunks with Redux Toolkit and TypeScript

 we used Redux Toolkit to create a todo app. Since RTK is considered to be the standard way to write redux applications, we will use thunks with Redux Toolkit to write asynchronous logic as well.

Thunks are a way to manage side effects when working with Redux. For instance, when we want to fetch some data from a server we need to perform an HTTP request. That request is a side effect because it interacts with the “outer world”.

Redux itself doesn't know anything about side effects in an app. All the work is done in the 

 middleware. It extends the store's abilities and lets you write async logic that interacts with the store.

 function automatically sets up the thunk middleware by default.

 that works synchronously, so we can only use the runtime storage to store the user data. In real-life applications, we would need to store user's data in some kind of persistent storage, on a server for example.

Let's change our app a bit and, as an example, create a method to load todos from the server and show them.

First of all, we're going to slightly refactor our previous code. We will extract our 

// app/store.ts

import { 
  TypedUseSelectorHook, 
  useSelector 
} from "react-redux";

// ...

export const useTypedSelector: TypedUseSelectorHook<
  RootState
> = useSelector;

...This will help us to re-use this function in another component later.

Also, we will extract some todos types into 

// feature/todos/types.ts

export type TodoId = string;

export type Todo = {
  id: TodoId;
  title: string;
  completed: boolean;
};


...Which will help us to cover the API requests with types.

. It allows us to fetch a list of todo-objects that we can render in our UI.

The endpoint we use returns a list of todo-objects

 for creating thunks. Let's start with creating one:

// features/todos/fetchTodos.ts

import { createAsyncThunk } from "@reduxjs/toolkit";

export const fetchTodos = createAsyncThunk(
  // The first argument is the action name:
  "todos/fetch", 
  
  // The second one is a function
  // called payload creator.
  // It contains async logic of a side-effect.
  // We can perform requests here,
  // work with device API, 
  // or any other async APIs we need to.
  async () => {}
);

// When we need to perform this side-effect 
// we will need to call the fetchTodos like this:
{
  const dispatch = useDispatch();
  () => dispatch(fetchTodos())
}

Let's write the real request logic using our placeholder backend:

// features/todos/fetchTodos.ts
// ...

export const fetchTodos = createAsyncThunk(
  "todos/fetch", 
  async () => {
    // Fetch the backend endpoint:
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/todos`
    );

    // Get the JSON from the response:
    const data = await response.json();
    
    // Return result:
    return data;
  }
);

Cool, now it's working. However, the result we return is not typed. TypeScript yet doesn't know about the structure of 

// features/todos/fetchTodos.ts
// ...

import { Todo } from "./types";

// `createAsyncThunk` is a generic function.
// We can use the first type-parameter
// to tell what type will be returned as a result.
export const fetchTodos = createAsyncThunk<Todo[]>(
  "todos/fetch", 
  async () => {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/todos`
    );

    // Alos, set a type for the `data` constant:
    const data: Todo[] = await response.json();
    return data;
    
    // We could also use `as` to coerce its type
    // as in the RTK docs.
  }
);

 to make sure that every response is typed.

 function doesn't take any argument. But let's think about a situation when we need to control the amount of fetched todos. We could use a function argument for that:

// features/todos/fetchTodos.ts
// ...

export const fetchTodos = createAsyncThunk<
  Todo[],
      
  // The second type-parameter in `createAsyncThunk`
  // tells what argument takes the function inside:
  number
>(
  "todos/fetch", 

  // Here, we can use this argument:
  async (limit: number) => {
    
    // For example, we could pass it 
    // as a GET-parameter in the request URL: 
    // fetch(`/todos?limit=${limit}`)
	// ...
    return data;
  }
);

// In this case we could use this function
// with an argument:
{
  const dispatch = useDispatch();
  () => dispatch(fetchTodos(100))
}

The only thing left to cover is errors. Imagine that the server responded with a status 400. In this case, we would need to tell our users that todos aren't loaded and show the error message.

// features/todos/fetchTodos.ts
// ...

// This type describes the error object structure:
type FetchTodosError = {
  message: string;
};

// The third type-parameter is an object with:
// `{dispatch?, state?, extra?, rejectValue?}`` fields.
//
// `extra` is useful when we need to pass 
// some static data to the request function,
// like jwt-token or HTTP-headers.
//
// `rejectValue` is useful when we need to type 
// possible errors.
export const fetchTodos = createAsyncThunk<
  Todo[],
  number,
  { rejectValue: FetchTodosError }
>(
  "todos/fetch", 
  // The second argument, `thunkApi`, is an object
  // that contains all those fields
  // and the `rejectWithValue` function:
  async (limit: number, thunkApi) => {
    const response = await fetch(/*...*/);
    
    // Check if status is not okay:
    if (response.status !== 200) {
      // Return the error message:
      return thunkApi.rejectWithValue({ 
        message: "Failed to fetch todos." 
      });
    }
    
    return data;
  }
);

Notice that TS cannot mix explicit and inferred generic parameters. If we want to use 

 we need to define return-type and payload creator argument type as well.

. For that, we need to slightly change our 

// features/todos/todoSlice.ts

type TodosState = {
  // In `status` we will watch
  // if todos are being loaded.
  status: "loading" | "idle";
  
  // `error` will contain an error message.
  error: string | null;
  list: Todo[];
};

const initialState: TodosState = {
  list: [],
  error: null,
  status: "idle",
};

After it's done, let's define a selector for getting the 

// features/todos/todoSlice.ts
// ...

export const selectStatus = (state: RootState) =>
  state.todos.status;

Finally, let's add reducers for handling our 

// features/todos/todoSlice.ts
// ...

export const todosSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {
    // ...
  },

  // In `extraReducers` we declare 
  // all the actions:
  extraReducers: (builder) => {

    // When we send a request,
    // `fetchTodos.pending` is being fired:
    builder.addCase(fetchTodos.pending, (state) => {
      // At that moment,
      // we change status to `loading` 
      // and clear all the previous errors:
      state.status = "loading";
      state.error = null;
    });

    // When a server responses with the data,
    // `fetchTodos.fulfilled` is fired:
    builder.addCase(fetchTodos.fulfilled, 
      (state, { payload }) => {
      // We add all the new todos into the state
      // and change `status` back to `idle`:
      state.list.push(...payload);
      state.status = "idle";
    });

    // When a server responses with an error:
    builder.addCase(fetchTodos.rejected, 
      (state, { payload }) => {
      // We show the error message
      // and change `status` back to `idle` again.
      if (payload) state.error = payload.message;
      state.status = "idle";
    });
  },
});

 thunk inside a component. Let's create a button, click on which will fetch a list of todos from a server.

// features/todos/LoadTodos.tsx
import React from "react";
import { useDispatch } from "react-redux";
import { useTypedSelector } from "../../app/store";
import { fetchTodos } from "./fetchTodos";
import { selectStatus } from "./todosSlice";

export const LoadTodos = () => {
  const dispatch = useDispatch();
  
  // Get the current `status`:
  const status = useTypedSelector(selectStatus);

  // When clicked, dispatch `fetchTodos`:
  const handleClick = () => dispatch(fetchTodos());

  return (
    // Change the button text
    // depending on the current `status`:
    <button type="button" onClick={handleClick}>
      {status === "loading" 
        ? "Loading todos..." 
        : "Load todos"}
    </button>
  );
};


Now we can use this component to load todos from the server.

AUTHOR

Alex Bespoyasov

Last time we used Redux Toolkit to create a todo app. Since RTK is considered to be the standard way to write redux applications, we will use thunks with Redux Toolkit to write asynchronous logic as well. Thunks are a way to manage side effects when working with Redux. For instance, when we want to…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

How to Use Thunks with Redux Toolkit and TypeScript

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript