nmodel
v1.1.2
Published
Lightweight wrapper for redux and redux-thunk
Downloads
5
Maintainers
Readme
NModel
Lightweight wrapper for redux and redux-thunk.
Install
npm install --save nmodel
or use yarn:
yarn add nmodel
Checkout examples
Features
- Easy to use
- Support load model dynamically
- Less API
Usage
1. Create redux store
// store.js
import { createStore } from 'nmodel';
const store = createStore();
2. Define a model
// model.js
import { model } from 'nmodel';
const m = model({
namespace: 'uniqueName', // must be unique in the app
state: { data: null }, // redux data
effects: {
// An effect is used to dispatch an action to update redux state.
// nmodel inject some api to effect
actionToUpdateReduxState ({ update, dispatch, put, getModelState, getState }, params) {
// Directly update redux state
update({ data: params });
},
callReducerMethod ({ put }, params) {
put({
type: 'callReducerMethod',
payload: {
data: params
}
})
}
},
reducers: {
callReducerMethod (state, { type, payload }) {
return {...state, { data: payload.data };
}
}
});
3. Connect to components
// container.js
import { connect } from 'react-redux';
import model from './model';
const mapDispatchToProps = {
...model.effects
};
const mapStateToProps = (state) => ({
...state[model.namespace]
});
export default connect(mapStateToProps, mapDispatchToProps)(SomeComponent);
Model
Model is just a part of redux store. A model will be initialized with a object which contains:
- namespace: Must be unique in app, used to ensure the model is unique.
- state: State data.
- effects: The same with redux's actions, but nmodel will inject some methods to update state more easily.
- reducers: The same with redux's action handlers
- onError: Triggered when effect throws error or rejects a promise
methods injected to effect:
- update(state): Update model state.
- put(action): Dispatch an action inside model. The action handler is defined in model's
reducers
, soaction.type
doesn't need to add prefix. - dispatch(action): Dispatch an action.
action.type
have to be prefixed with${model.namespace}/
- getState: Get store's whole state
- getModelState: Get the model state
API
createStore(initialState, middlewares, enhancers)
Create the redux store.
model(modelObject)
Define a model.