JsonApi Redux Data

JsonApi Redux data is a one stop shop for all your jsonapi needs! Provides methods to make your API call and formats and updates data in the redux store. It joins all of your relations so that accessing it is as easy as entity.relationship

For example if you made an API call to base-url/tasks?include=list, you can access your relationships as easily as tasks[index].list

• Provides methods to make api calls to your JSONApi compliant backend and updates the redux store as well.

• Combines the data so it is easily accessible

• Setup in 3 easy steps

Installation

yarn add jsonapi-redux-data

OR

npm i jsonapi-redux-data

Usage

• Update the reducers / rootReducers like this

  ...
  import { jsonApiReducer } from 'jsonapi-redux-data'
  ...
  const rootReducer = combineReducers({
      ...,
      api: jsonApiReducer,
      ...
  })
  ...
  

• Create the api client preferrably in the app.js

  ...
  import { createApiClientWithTransform } from 'jsonapi-redux-data'
  ...
  // Create redux store with history
  const initialState = {};
  const store = configureStore(initialState, history);
  ...
  
  createApiClientWithTransform('<base-url>', store)
  ...

• Make api call easily and from anywhere

  ...
  import { getApi } from 'jsonapi-redux-data'
  ...
  
  getApi({ pathname: '<pathname>', include: '<include-string>' })
  ...

Example Usage

getApi

  getApi({
    pathname: 'tasks',
    include: 'lists',
    levelOfNesting: 3
  });

Invoking this method will

• make an api call to base-url/tasks
• include lists in the response
• dispatch an action of type SUCCESS_API
• update the api reducer in the redux store with the formatted response.

API Documentation

getApi

Make a get request and add api response to the redux store.

/**
 * @param  {} requestPayload: {
 *   include: object
 *   filter: object,
 *   pathname: String,
 *   levelOfNesting: number,
 *   transformList: object,
 *   id: String
 * }
 * @param {} api: Custom Api Client instead of the latest created api client
 * @param {} axios: Special axios config
 **/
function getApi (requestPayload, api, axiosConfig)

postApi

Make a post request and add api response to the redux store

/**
 * @param  {} requestPayload: {
 *   include: object
 *   filter: object,
 *   pathname: String,
 *   levelOfNesting: number,
 *   transformList: object,
 *   postData: object
 *   }
 * @param {} api: Custom Api Client instead of the latest created api client
 * @param {} axios: Special axios config
 */
function postApi (requestPayload, api, axiosConfig)

patchApi

Make a patch request and add api response to the redux store

/**
 *
 * @param  {} requestPayload: {
 *   include: object
 *   filter: object,
 *   pathname: String,
 *   levelOfNesting: number,
 *   transformList: object,
 *   patchData: object
 * }
 * @param {} api: Custom Api Client instead of the latest created api client
 * @param {} axios: Special axios config
 *
 * */
function patchApi (requestPayload, api, axios)

deleteApi

Make a delete request and add api response to the redux store

/**
 *
 * @param  {} requestPayload: {
 *   pathname: String,
 *   id: String
 * }
 * @param {} api: Custom Api Client instead of the latest created api client
 * @param {} axios: Special axios config
 *
 * */
function deleteApi (requestPayload, api, axios)

getRequest

GET HTTP REQUEST, uses the apisauce.get underneath the hood.

/**
 * @param  {} pathname: the endpoint path
 * @param  {} include: the jsonapi include string
 * @param  {} filter: the jsonapi filter string
 * @param  {} id: the id of the GET request.
 * @param  {} api: default is getLatestApiClient()
 * @param  {} axiosConfig: custom axiosConfig for this request
 */
function getRequest (pathname, include, filter, id, api, axiosConfig)

postRequest

POST HTTP REQUEST, uses the apisauce.get underneath the hood.

/**
 *
 * @param  {} pathname: the endpoint path
 * @param  {} include: the jsonapi include string
 * @param  {} filter: the jsonapi filter string
 * @param  {} postData: request body
 * @param  {} api: default is getLatestApiClient()
 * @param  {} axiosConfig: custom axiosConfig for this request
 */
function postRequest (pathname, include, filter, postData, api, axiosConfig)

patchRequest

PATCH HTTP REQUEST, uses the apisauce.get underneath the hood.

/**
 * @param  {} pathname
 * @param  {} include: the jsonapi include string
 * @param  {} filter: the jsonapi filter string
 * @param  {} id: the id of the PATCH request.
 * @param  {} patchData: request body
 * @param  {} api: default is getLatestApiClient()
 * @param  {} axiosConfig: custom axiosConfig for this request
 */
function patchRequest (pathname, include, filter, id, patchData, api,axiosConfig)

deleteRequest

DELETE HTTP REQUEST, uses the apisauce.get underneath the hood.

/**
 * @param  {} pathname
 * @param  {} id: the id of the DELETE request.
 * @param  {} api: default is getLatestApiClient()
 * @param  {} axiosConfig: custom axiosConfig for this request
 */
function deleteRequest (pathname, id, api, axiosConfig)