Redux Toolkit Extra Reducer explained (+ createAsyncThunk)

 Redux/ xyzApi.js

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

const fetchUserData = createAsyncThunk(
"user/fetchUserData",
async (userId, { extra }) => {
//const { apiClient } = extra;
const response = await axios.get(`/users/${userId}`);
return response.data;
}
);

export default fetchUserData;

 Redux/ userSlice.js  // Reducer

import { createSlice } from "@reduxjs/toolkit";
import { fetchUserData } from "./thunks";

const userSlice = createSlice({
name: "user",
initialState: {
data: null,
status: "idle",
error: null,
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchUserData.pending, (state) => {
state.status = "loading";
})
.addCase(fetchUserData.fulfilled, (state, action) => {
state.status = "succeeded";
state.data = action.payload;
})
.addCase(fetchUserData.rejected, (state, action) => {
state.status = "failed";
state.error = action.error.message;
});
},
});

export default userSlice.reducer;