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 data = [
    {
    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 { data } 
            

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_DATA = "/data";
         

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 getData = () => api.get(url.GET_DATA, null);
            

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

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

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

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

import { createSlice } from "@reduxjs/toolkit";
import {getData, addNewData, updateData, deleteData} from "./thunk"   export const initialState ={
    dataList: [],
} 
    const EcommerceSlice = createSlice({
        name : "Ecommerce",
        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;
        });
    },
})
                                                

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_DATA).reply(() => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (datatabledata) {
          // Passing fake JSON data as response
          resolve([200, datatabledata]);
        } else {
          reject([400, "Cannot get 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 { getData as onGetData} from "slices/thunk"
import { createSelector } from 'reselect';
    
const { dataList } = useSelector((state: any) => ({
    dataList: state.Ecommerce.dataList
}));

   const selectEcommerceProperties = createSelector(
        (state: any) => state.Ecommerce,
        (ecommerce) => ({
            dataList: ecommerce.dataList,
        })
    );
    // Inside your component
    const {
        dataList,
    } = useSelector(selectEcommerceProperties);
    
useEffect(() => {
    dispatch(onGetData())
}, [dispatch]);