Api Integration

In Skote React, a fake backend setup is included by default. All the files related to API integrations can be located within the src/helpers folder. While we've provided a fake backend for your convenience, you have the flexibility to remove it and replace it with your custom API by following the steps outlined in the src/helpers directory.

  • src/helpers/api_helper.js file contains axios setup to call server API(s) including get, put, post, delete, etc methods, interceptors & token set methods.

  • src/helpers/fakebackend_helper.js file contain all API's call functions.

  • src/helpers/url_helper.js file contain all module's API's url.

Note : we have added a Fake backend setup just for user interactions, but if you are working with the real API integration, then there is no need of fake-backend so you can simply delete the file src/helpers/fakeBackend.js, and remove the code related to Fake-Backend from app.js file. you just need to update API's URL of the related module in the src/helpers/url_helper file, that's it!
How to Integrate custom API?

Please follow the below steps :

-> Let's assume that our API's URL is "YOUR_API" . First we have to add this URL in src/helpers/url_helper.js file 

export const GET_DATA = "YOUR_API";

-> Whatever methods you want to use, import it import { APIClient } from "src/helpers/api_helper"; and add below function in src/helpers/fakebackend_helper.js file. We have created new function getDemoData and exported it so it can be used in another files. 

import { APIClient } from "./api_helper";
import * as url from "./url_helper"
import { del, get, post, put } from "./api_helper";

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

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

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/slices/Data/saga.js folder. We have to import api from the fakebackend_helper.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));
    }
}
© Skote.