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 = "...