Redux models
Models layer for Redux. redux-models
simplifies working with remote data (well.. not only remote) and helps to organize your code.
Installation
npm install --save redux redux-models
Usage
models/User.js
; name: 'User' methods: { return ; } ;
store.js
;;; ;
app.js
import React from 'react';import connect from 'react-redux';import User from './models/User'; Component { const fetchUser = thisprops; ; } { const user = thisprops; if !user return <div>Loading...</div>; return <img = ="avatar" />; } state username user: dispatch username UserAvatar;
API
createModel(options)
Arguments
options
:
options.name
: (String
): Name of a modeloptions.mixins
: (Array
): Array of mixinsoptions.methods
: (Object
): Model's methodsoptions.reducer
: (Function
[optional]): Model reducer.options.typePrefix
: (String
[optional]): Prefix of actions types. Default@@redux-models
.options.modelState
: (Function
[optional]): Function to map state to model state. Defaultstate => state[{ model name }]
.
Returns
Newly created model with defined methods. Each model method creates action to dispatch.
Model reducer
Additional data processing from the methods can be done in the model reducer.
Model reducer arguments are same as redux reducers, except the last argument types
.
It contains all action types strings your model can dispatch (including mixins action types).
In following example model User
has one method find
and it can dispatch actions with types: @@redux-models/USER/FIND
, @@redux-models/USER/FIND_SUCCESS
, @@redux-models/USER/FIND_ERROR
, @@redux-models/USER/FIND_RESET
,
so types
contains object:
{ FIND: '@@redux-models/USER/FIND', find: '@@redux-models/USER/FIND', FIND_SUCCESS: '@@redux-models/USER/FIND_SUCCESS', findSuccess: '@@redux-models/USER/FIND_SUCCESS', FIND_ERROR: '@@redux-models/USER/FIND_ERROR', findError: '@@redux-models/USER/FIND_ERROR', FIND_RESET: '@@redux-models/USER/FIND_RESET', findReset: '@@redux-models/USER/FIND_RESET'}
After processing, the data will be available in state.{ model name }.model
.
Example
; const defaultState = byId: {}; name: 'User' methods: { // async request } { const type payload: result = {} } = action; if type === findSuccess return ...state byId: ...statebyId ...result || ; return state; };
Then:
import connect from 'react-redux';// ... state id user: stateUsermodelbyIdidUserCard;
Mixins
Mixins allow you to add method sets to multiple models. For example mixin
crud
adds methods: create
, updateById
, deleteById
, find
, findById
.
crud.js
import createMixin from 'redux-models-mixin-crud'; { return ;}
book.js
import createModel from 'redux-models';import crudMixin from './crud'; name: 'Book' mixins: ;
Contributing
See the Contributors Guide
License MIT