How to Integrate custom FakeBackend?

First you needs to create json data files, which you can put in the folder src/Common/data from where the data/json will be called.

    const ordertabledata = [
        {
        id: "1",
        orderdate: "22 Feb, 2023",
        customer: "Deondre Fahey",
        name: "Ratke Group",
        paymethod: "COD",
        },
        {
        id: "2",
        orderdate: "14 Feb, 2023",
        customer: "Warren Anderson",
        name: "Zibra Fashion",
        paymethod: "Mastercard",
        },
    ]

    export { ordertabledata } 
        

The url_helper is a helper function that is used to generate URLs. For that we have created file src/helpers/url_helper.ts.

    export const GET_ORDER = "/order";
     

A Fakebackend is a server that is used to simulate the behavior of a real backend. src/helpers/fakebackend_helper.ts is path for fakeBackend file where you have to import "./url_helper" and "./api_helper" file for exporting the data.

    import * as url from "./url_helper";
    //  Api 
    import { APIClient } from "./api_helper";

    const api = new APIClient();

    export const getOrder = () => api.get(url.GET_ORDER, null);
        

A thunk works as a middleware, which is placed at src/slices/ecommerce/thunk.ts folder.

    import { createAsyncThunk } from "@reduxjs/toolkit";
    import {
        getOrder as getOrderApi,
    } from "src/helpers/fakebackend_helpers"
    import { toast } from "react-toastify";

    export const getOrder = createAsyncThunk("ecommerce/getOrder", async () => {
        try {
          const response = getOrderApi();
          return response;
        } catch (error) {
          return error;
        }
      });

Reducer is also worked as middleware for react, which is placed at src/slices/ecommerce/reducer.ts folder.

    import { createSlice } from "@reduxjs/toolkit";
    import {getOrder, addNewOrder, updateOrder, deleteOrder} from "./thunk"

    export const initialState ={
        orderList: [],
    }

    const EcommerceSlice = createSlice({
        name : "Ecommerce",
        initialState,
        reducers: {},

        extraReducers: (builder) => {

            //order
            builder.addCase(getOrder.fulfilled, (state: any, action: any) => {
                state.orderList = action.payload;
            });
            builder.addCase(getOrder.rejected, (state: any, action: any) => {
                state.error = action.payload.error || null;
            });
        },
    })
                                            

FakeBackend through we will getdata from Common/data and with the help of axios we can pass the data, which is placed at src/helpers/AuthType/fakeBackend.ts folder.

    import MockAdapter from "axios-mock-adapter";

    import * as url from "../url_helpers"
    import axios from "axios";

    let users = [
        {
          uid: 1,
          username: "admin",
          role: "admin",
          password: "123456",
          email: "admin@themesbrand.com",
        },
      ];

    const fakeBackend = () => {
        // This sets the mock adapter on the default instance
        const mock = new MockAdapter(axios, { onNoMatch: "passthrough" });
        mock.onPost("/post-jwt-register").reply((config: any) => {
          const user = JSON.parse(config["data"]);
          users.push(user);
        
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve([200, user]);
            });
          });
        });

     mock.onGet(url.GET_ORDER).reply(() => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            if (ordertabledata) {
              // Passing fake JSON data as response
              resolve([200, ordertabledata]);
            } else {
              reject([400, "Cannot get order Data"]);
            }
          }); 
        });
      });
    }
    export default fakeBackend; 
        

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 { getOrder as onGetOrder} from "slices/thunk"

    const { orderList } = useSelector((state: any) => ({
        orderList: state.Ecommerce.orderList
    }));

    useEffect(() => {
        dispatch(onGetOrder())
    }, [dispatch]);
    // console.log();