API Integration

Skote 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 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 to make the custom API working.

  1. Let's assume that our API's URL is "https://jsonplaceholder.typicode.com/posts". sFirst we have to add this URL in /src/helpers/url_helper.js file 
    ...
export const GET_DEMO_DATA = "https://jsonplaceholder.typicode.com/posts";
  2. Whatever methods you want to use, import it import { del,get,post,put } from "./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 { del, get, post, put } from "./api_helper";
import * as url from "./url_helper";
                                        
const getDemoData = () => get(url.GET_DEMO_DATA);
                
export { getDemoData };
  • After the above setup, We will do redux action's setup. Please check How To Create Actions & Saga first.

    Create a folder named with your module in src/store folder i.e. demo module then it should be src/store/demo then create actions.js, saga.js, reducer.js & actionTypes.js files and follow the pattern of other modules which are added in this template. Also do not forget to export it in main files (action.js, reducer.js and saga.js ) of src/store folder.

  • Add your action name in the actionTypes.js as well. Here, we can have either success or error response from the api. so we have managed this by GET_DEMO_DATA_SUCCESS & GET_DEMO_DATA_FAIL actions. 
    export const GET_DEMO_DATA = "GET_DEMO_DATA";
export const GET_DEMO_DATA_SUCCESS = "GET_DEMO_DATA_SUCCESS";
export const GET_DEMO_DATA_FAIL = "GET_DEMO_DATA_FAIL";
  • Create the action in the action.js file. And make sure you pass the same action type as a type parameter that you added in the actionTypes.js file. 
    import {
  GET_DEMO_DATA,
  GET_DEMO_DATA_SUCCESS,
  GET_DEMO_DATA_FAIL,
} from "./actionTypes";

export const getDemoData = () => ({
  type: GET_DEMO_DATA,
});

export const getDemoDataSuccess = data => ({
  type: GET_DEMO_DATA_SUCCESS,
  payload: data,
});

export const getDemoDataFail = error => ({
  type: GET_DEMO_DATA_FAIL,
  payload: error,
});
  • Add your action to the reducer.ts. 
    import {
  GET_DEMO_DATA_SUCCESS,
  GET_DEMO_DATA_FAIL,
} from "./actionTypes";

const INIT_STATE = {
  demoData: [],
};

const Demo = (state = INIT_STATE, action) => {
  switch (action.type) {
    case GET_DEMO_DATA_SUCCESS:
      return {
        ...state,
        demoData: action.payload,
      };

    case GET_DEMO_DATA_FAIL:
      return {
        ...state,
        error: action.payload,
      };
    default:
      return state;
  }
};

export default Demo;
  • Now, create saga.ts file and Add saga funtion & watcher for the action. 
    import { takeEvery, put, call,all,fork  } from "redux-saga/effects";

// Login Redux States
import {
    GET_DEMO_DATA,
} from "./actionTypes"
import {
    getDemoDataSuccess,
    getDemoDataFail,
} from "./actions"
                                      
import { getDemoData } from "../../helpers/fakebackend_helper";

function* fetchDemoData() {
  try {
    const response = yield call(getDemoData)
    yield put(getDemoDataSuccess(response))
  } catch (error) {
    yield put(getDemoDataFail(error))
  }
}
                                      
export function* watchFetchDemoData() {
  yield takeEvery(GET_DEMO_DATA, fetchDemoData);
}
                                      
function* demoSaga() {
  yield all([fork(watchFetchDemoData)]);
}
                                      
export default demoSaga;
  • After redux & saga's setup, you just need to call the action from your component.
  • Hooks base Example
    • import React, { useEffect } from "react";

//redux
import { useSelector, useDispatch } from "react-redux";

// actions
import { getDemoData } from "../store/actions";

const Demo = (props) => {
  const dispatch = useDispatch();
  const { demoData } = useSelector(state => ({
    demoData: state.Demo.demoData,
  }));

  /*
  get data
  */
  useEffect(() => {
    dispatch(getDemoData());
  }, [dispatch]);

  // your API's response data will be in events variable.
  console.log(demoData);

  return (
    <div>
    </div>
  );
};

export default Demo;
  • Class base Example 
    import React, { Component } from 'react';
import PropTypes from "prop-types";
import { connect } from "react-redux";

// actions
import { getDemoData } from "../store/actions";

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      demo: []
    };
  };
  componentDidMount() {
    const { onGetDemoData } = this.props;
    onGetDemoData();
  };

  //get Data
  componentDidUpdate(prevProps) {
    if (prevProps !== this.props) {
      this.setState({ ...this.state, demo: this.props.demoData });
    }
  };
  render() {
    console.log(this.state.demo);
    return (
      <div>
      </div>
    );
  };
};

Demo.propTypes = {
  demoData: PropTypes.any,
  onGetDemoData: PropTypes.func
};

const mapStateToProps = ({ Demo }) => ({
  demoData: Demo.demoData,
});

const mapDispatchToProps = dispatch => ({
  onGetDemoData: () => dispatch(getDemoData()),
});

export default connect(
  mapStateToProps, mapDispatchToProps
)(Demo);