Set REACT_APP_DEFAULTAUTH=fake in the .env file.
Remove the firebase setup code from the App.js in file.
Now just uncomment the below fake-backend setup code in the App.js in typescript file.

import fakeBackend from "src/helpers/AuthType/fakeBackend.ts"; // "fakeBackend.js"
                                        
        // Activating fake backend
        
        fakeBackend();

It is often used for development and testing purposes, as it allows developers to test their code without having to worry about the availability of a real backend.

-> 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 in typescript 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 or thunk.js 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 or reducer.js file there was a main file for whole reducers files that combines all the reducers into one. src/slices/index.ts or index.js 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 or thunk.js 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 or fakebackend_helper.js 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 or url_helper.js. 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 or fakeBackend.js 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]);