Utilizing the Enhanced createAsyncThunk API

Demonstrate how `createAsyncThunk` now supports cancellation and aborting for better async action management in RTK 2.0.
import { createAction } from '@reduxjs/toolkit';

// Define a cancellation action
export const cancelFetchingUser = createAction('users/cancelFetchingUser');
Define a cancellation action using createAction to be dispatched when the async task should be aborted.
import { createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

// Create an async thunk with cancellation support
export const fetchUserById = createAsyncThunk(
  async (userId, { signal }) => {
    const source = axios.CancelToken.source();
    signal.addEventListener('abort', () => {
    const response = await axios.get(`/api/users/${userId}`, {
      cancelToken: source.token
Create an async thunk using createAsyncThunk with enhanced API that includes the abort signal argument. Add event listener to abort the axios request when the thunk is aborted.
import { configureStore } from '@reduxjs/toolkit';

// Create a Redux store with the reducer that handles the async action and the cancellation action
const store = configureStore({
  reducer: {
    // reducers here
  middleware: (getDefaultMiddleware) =>
      thunk: {
        extraArgument: {
          // You can pass extra arguments to your async thunks here
Create a Redux store with a reducer and apply the default middleware with configuration that can handle the async thunk and the cancellation action.