-> 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 } 

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

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 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 exporting data from reducer.ts file there was a main file for whole reducers files that combines all the reducers into one. src/slices/index.ts here we combines the rootReducers for store.

import dataReducer from "./Data/reducer"
const rootReducer = combineReducers ({
        Data: dataReducer,
})
export default rootReducer

-> Same as above all the thunks file are also imported and exported in main thunk file. src/slices/thunk.ts we use this file to get response in react component.

export { getData } from "./Data/thunk"

-> 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);

-> The url_helper is a helper function that is used to generate URLs. For that we have created file src/helpers/url_helper.ts. From where we can get fake url for functionality.

export const GET_DATA = "/invoice";

-> 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 file.

import MockAdapter from "axios-mock-adapter";
    
import * as url from "../url_helpers"
import axios from "axios";

import { data } from "Common/data";
       
const fakeBackend = () => {

    mock.onGet(url.GET_DATA).reply(() => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            if (data) {
              // Passing fake JSON data as response
              resolve([200, data]);
            } else {
                reject([400, "Cannot get contact list"]);
            }
          });
        });
    });

}
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";

const datasTable = createSelector(

    (state : any) => state.Data,
    (state) => ({
        dataList: state.dataList,
    })
);

const { dataList } = useSelector(datasTable);
    
useEffect(() => {
    dispatch(onGetData())
}, [dispatch]);