nmodel

Lightweight wrapper for redux and redux-thunk

Usage no npm install needed!

<script type="module">
  import nmodel from 'https://cdn.skypack.dev/nmodel';
</script>

README

NModel

Lightweight wrapper for redux and redux-thunk.

build status npm version npm downloads

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