Api Integration

API Integration

Velzon react having fake-backend setup already. you will find all files related to api integrations in the src/helpers folder. By default we have provided fake-backend but you can remove it and update with your custom API by doing the following changes in the src/helpers.

src/helpers/api_helper.js in javascript and src/helpers/api_helper.ts in typescript 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 in javascript and src/helpers/fakebackend_helper.ts in typescritp file contain all API's call functions.
src/helpers/url_helper.js in javascript and src/helpers/url_helper.ts in typescript 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 or fakeBackend.ts, and remove the code related to Fake-Backend from app.js or app.tsx 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 "https://jsonplaceholder.typicode.com/posts" . First we have to add this URL in src/helpers/url_helper.ts file

export const GET_DEMO_DATA = "https://jsonplaceholder.typicode.com/posts";

-> 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 or fakebackend_helper.ts 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"

const api = new APIClient();

export const getDemoData = (data: any) => api.get(url.GET_DEMO_DATA, data);

-> Reducer is also worked as middleware for react, which is placed at src/slices/ecommerce/reducer.js or reducer.ts file. we can get data in reducer from thunk.js or thunk.ts file.

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

-> The below demo example is described in typescript and also works same in javascript with .js extension.

-> A thunk works as a middleware, which is placed at src/slices/Data/thunk.ts or thunk.js folder. We have to import api from the fakebackend_helper.ts or fakebackend_helper.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 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]);