redux-rest-adapter
redux-rest-adapter is a tool for easy connection your REST api with redux store.
Compatible with json.api specification
Main points
- Write code instead of reducers and actions for trivial data operations.
Changelog
Starts from v2.0.0 redux-rest-adapter based on axios and promise-middleware for easy access to promises and better experience with isomorphic app.
short-example.js
;; const tagsApi = entityName: 'TAG' endpointUrl: 'api/v2/tags' ; const apiReducer = ; const store = ; store
Setup
your/known-entities-api.js
; const KnownEntitiesUrls = NEWS_TAGS: 'news-tags' NEWS_TAG_FOR_EDIT: 'news-tags' //..;;
your/api-reducer.js
; // Ability to extend default api reducersconst apiReducersExtensions = NEWS_TAGS: tagsReducer const apiReducers = _; apiReducers;
your/index-reducer.js
; api: apiReducer //..;
your/configure-store.js
;;//.. { return ;}
your/entities-actions.js
; ;
Adapter is ready
Usage
Actions
; ; // GET: api/v2/news-tags; // GET: api/v2/news-tags/1 // --- NOTE: HTTP methods for create and update operations can be configured; // PATCH: api/v2/news-tags/1; // POST: api/v2/news-tags; // DELETE: api/v2/news-tags/1 // --- Silent methods for changing store without sync with backend; // set new data; // reset to initial state
React component example
; { thisprops; } //.. { thisprops; } { const data = thispropstagForEdit; if dataid thisprops; else thisprops; } { return thispropspending ? <Loading/> : <div> /*...*/ </div> ; } const mapStateToProps = list: stateapiNEWS_TAGSdata || pending: stateapiNEWS_TAGS_pending tagForEdit: stateapiNEWS_TAG_FOR_EDITdata || {}; const mapDispatchToProps = createTag: entitiesActionsNEWS_TAG_FOR_EDITcreate updateTag: entitiesActionsNEWS_TAG_FOR_EDITupdate resetEntryForEdit: entitiesActionsNEWS_TAG_FOR_EDITreset loadList: entitiesActionsNEWS_TAGSload; const TagsContainer = TagsComponent; ;
Configuration
EntityApi constructor options
Name | Type | Default | Description |
---|---|---|---|
entityName |
String |
Required. will be used for naming state and actionTypes. | |
endpointUrl |
`String | Required. endpointUrl | |
reducersBuilderCustom |
Object |
reducersBuilderDefault |
Customer can redefine interface of reducers-builder.js |
axiosConfig |
Object |
{} |
axios config |
resourceKey |
String |
'data' |
Name of data property key at response object |
idKey |
String |
'id' |
Name of id property key at response data object. Required for CRUD reducer extensions |
restHttpMethods |
Object |
{create:'post', update:'patch'} |
Customer can change HTTP methods used for create and update actions |
TODO
Example of generated list reducer (basic CRUD operations)