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, so action.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.

License

MIT