Fakebackend Setup

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

import fakeBackend from "src/helpers/AuthType/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.

How to Integrate custom FakeBackend?

Please follow the below steps:

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

-> In your React component or container, you dispatch an action to request data from the fake backend. This action triggers the saga. For getting the data you should get data from the saga.js file. And we can get data in saga as response from fakebackend_helper.js file.

In Saga middleware actionTypes.js file defines the type of actions triggered.

export const GET_DATA = "GET_DATA"

To trigger a saga, you dispatch an action that the saga is listening for. You'd dispatch the GET_DATA action to initiate the fetchDataSaga in actions.js file.

import { GET_DATA } from './actionTypes';
export const getDatas = () => ({
    type: GET_DATA,
})

-> Reducer is also worked as middleware for react, which is placed at src/store/Data/reducer.js folder. 

import { GET_DATA_SUCCESS } from "./actionTypes"

const INIT_STATE = {
    datas: [],
    data: {},
    error: {},
    loading: true
};

const Demodatafile = (state = INIT_STATE, action) => {
    switch (action.type) {
      case GET_DATA:
        return {
          ...state,
          data: action.payload,
          loading: true
        };
    }
}

export default Demodatafile

-> A saga works as a middleware, which is placed at src/store/Data/saga.js file. 

import { call, put, takeEvery } from "redux-saga/effects";
import { GET_DATA } from "./actionTypes"
import { getDatas } from "./actions"
import { getDemoData } from "helpers/fakebackend_helper"

function* fetchDatas() {
    try {
      const response = yield call(getDemoData);
      yield put(getDemoData(response));
    } catch (error) {
      yield put(getDemoDataFail(error));
    }
}

-> After exporting data from reducer.js file there was a main file for whole reducers files that combines all the reducers into one. src/store/reducer.js here we combines the rootReducers for store. 

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

-> Same as above all the saga files are also imported and exported in main saga file. src/store/sagas.js we use this file to get response in react component. 

export { getData } from "./Data/saga"
export default function* rootSaga() {
    yield all([
      //public
      fork(DataSaga),
    ]);
}

-> A Fakebackend is a server that is used to simulate the behavior of a real backend. src/helpers/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";
import { del, get, post, put } from "./api_helper";

export const getDemoData = () => get(url.GET_DATA);

-> The url_helper is a helper function that is used to generate URLs. For that we have created file src/helpers/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.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 "store/saga";  
const datasTable = createSelector(

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

const { dataList } = useSelector(datasTable);

useEffect(() => {
    dispatch(onGetData())
}, [dispatch]);
© Skote.