Thunk Functions

Thunk functions let us perform asynchronous logic in our application, for example, running a timer or making an API call.

These functions are created using two functions:

• An inner function with dispatch and getState as arguments;
• Another function that returns the inner function.

99
1
2
3
4
5
6
7
8
9
10
// Outer function
function exampleThunk() {
    // Inner function
    return function(dispatch, getState) {
        setTimeout(() => {
            // Action dispatched after 10 seconds
            dispatch(someAction)
        }, 10000);
    }
}

In the inner function, the dispatch argument represents the dispatch function hence we can use dispatch inside it for dispatching an action, while the getState argument is a function for getting the state of the application.

A thunk function can be called like a normal action using the dispatch function:

dispatch(exampleThunk);

It can also have arguments:

9
1
2
3
4
5
6
7
8
9
export function exampleThunk(value, text) {
    return function(dispatch, getState) {
        setTimeout(() => {
            dispatch(someAction({ number: value, word: text }));
        }, 10000);
    }
}

dispatch(exampleThunk(27, 'example'));

Following is an example of a Thunk function for fetching data from an API:

9
1
2
3
4
5
6
7
function showRandomFact () {
    return async function(dispatch, getState) {
        // Fetch data from a Random Fact API
        const data = await getRandomFact();
        dispatch(showFact(data));
    }
}

Apart from that, createAsyncThunk is a function that allows you to handle asynchronous actions in a more organized manner.

It allows you to define a specific action that will be dispatched when the async request is started, succeeded, or failed, which makes it easier to handle the different states of the request in your application.

9
1
2
3
4
5
6
import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchData = createAsyncThunk('data/fetch', async () => {
    const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
    return response.data;
});

The above code contains a thunk function for fetching data from an API. We can use it in our component like this:

99
1
2
3
4
5
6
7
8
9
10
11
12
13
import { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { fetchData } from './dataSlice'

const MyComponent = () => {
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(fetchData())
    }, []);

    // render your component
}

When the fetchData action is dispatched, the async function defined in the createAsyncThunk call will be executed. The function will return a promise, and when that promise is resolved or rejected, the createAsyncThunk will dispatch additional actions with the type data/fetch/fulfilled or data/fetch/rejected, respectively. You can handle these actions in your reducer to update your state accordingly:

99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { createSlice } from '@reduxjs/toolkit'
import { fetchData } from './dataSlice'
 
const dataSlice = createSlice({
    name: 'data',
    initialState: {
        data: [],
        status: 'idle',
        error: null
    },
    reducers: {},
    extraReducers: (builder) => {
        builder
            .addCase(fetchData.pending, (state) => {
                state.status = 'loading'
            })
            .addCase(fetchData.fulfilled, (state, action) => {
                state.status = 'succeeded'
                state.data = action.payload
            })
            .addCase(fetchData.rejected, (state, action) => {
                state.status = 'failed'
                state.error = action.error.message
            })
    }
});