Have ideas to improve npm?Join in the discussion! »

    nmodel
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    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

    Install

    npm i nmodel

    DownloadsWeekly Downloads

    7

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    87 kB

    Total Files

    26

    Last publish

    Collaborators

    • avatar