https://github.com/wednesday-solutions/jsonapi-redux-data
JSONAPI middleware for redux
https://github.com/wednesday-solutions/jsonapi-redux-data
api apisauce axios json-api jsonapi react react-redux redux state-management
Last synced: 8 months ago
JSON representation
JSONAPI middleware for redux
- Host: GitHub
- URL: https://github.com/wednesday-solutions/jsonapi-redux-data
- Owner: wednesday-solutions
- License: mit
- Created: 2020-01-02T21:09:37.000Z (almost 6 years ago)
- Default Branch: develop
- Last Pushed: 2023-01-04T14:54:22.000Z (almost 3 years ago)
- Last Synced: 2025-03-27T11:38:31.853Z (9 months ago)
- Topics: api, apisauce, axios, json-api, jsonapi, react, react-redux, redux, state-management
- Language: JavaScript
- Homepage: https://wednesday.is/building-products/?utm_source=github&utm_medium=jsonapi-redux-data
- Size: 8.11 MB
- Stars: 16
- Watchers: 3
- Forks: 3
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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('', store)
...
```
- Make api call easily and from anywhere
```
...
import { getApi } from 'jsonapi-redux-data'
...
getApi({ pathname: '', include: '' })
...
```
## 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)
```