Judia react having fake-backend setup already. you will find all files related to api integrations in the src/helpers folder. By default we have provided fake-backend but you can remove it and update with your custom API by doing the following changes in the src/helpers.

• src/helpers/api_helper.ts file contains axios setup to call server API(s) including get, put, post, delete, etc methods, interceptors & token set methods.
• src/helpers/fakebackend_helper.ts file contain all API's call functions.
• src/helpers/url_helper.ts file contain all module's API's url.

-> Let's assume that our API's URL is "https://jsonplaceholder.typicode.com/posts" . First we have to add this URL in src/helpers/url_helper.ts file

export const GET_DEMO_DATA = "https://jsonplaceholder.typicode.com/posts";

-> Whatever methods you want to use, import it import { APIClient } from "src/helpers/api_helper"; and add below function in src/helpers/fakebackend_helper.ts file. We have created new function getDemoData and exported it so it can be used in another files.

import { APIClient } from "./api_helper";
    import * as url from "./url_helper"
    
    const api = new APIClient();
    
    export const getDemoData = (data: any) => api.create(url.GET_DEMO_DATA, data);

-> Reducer is also worked as middleware for react, which is placed at src/slices/ecommerce/reducer.ts file. we can get data in reducer from thunk.ts file.

import { createSlice } from "@reduxjs/toolkit";
    import { getData } from "./thunk"
    
    export const initialState ={
        dataList: [],
    }
    
    const EcommerceSlice = createSlice({
        name : "Data",
        initialState,
        reducers: {},
    
        extraReducers: (builder) => {
    
            //data
            builder.addCase(getData.fulfilled, (state: any, action: any) => {
                state.dataList = action.payload;
            });
            builder.addCase(getData.rejected, (state: any, action: any) => {
                state.error = action.payload.error || null;
            });
        },
    })

-> A thunk works as a middleware, which is placed at src/slices/Data/thunk.ts folder. We have to import api from the fakebackend_helper.ts file.

import { createAsyncThunk } from "@reduxjs/toolkit";
    import {
        getData as getDataApi,
    } from "src/helpers/fakebackend_helper"
            
    export const getData = createAsyncThunk("datas/getData", async () => {
        try {
            const response = getDataApi();
            return response;
        } catch (error) {
            return error;
        }
    });

-> After following the above steps you can call data and use it in your components or pages where is needed by the dispatch data method and managing the state.

import { getData as onGetData} from "slices/thunk";
    
    const datasTable = createSelector(
    
        (state : any) => state.Data,
        (state) => ({
            dataList: state.dataList,
        })
    );
    
    const { dataList } = useSelector(datasTable);
        
    useEffect(() => {
        dispatch(onGetData())
    }, [dispatch]);