simple-module-redux

Installation

npm install simple-module-redux

Module { name, state, reducers, actions }

const asyncFn = payload => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ number: 666 + payload });
    }, 2000);
  });
};
const moduleDemo = {
  name: 'demo',
  state: {
    number: 1
  },
  reducers: {
    save(state, payload) {
      return { ...state, ...payload };
    }
  },
  actions: {
    add({ commit, state }, payload) {
      commit({
        type: 'save',
        payload: { number: state.number + payload }
      });
    },
    minus({ commit, state }, payload) {
      commit({
        type: 'save',
        payload: { number: state.number - payload }
      });
    },
    asyncUpdate({ commit, state }, payload) {
      return asyncFn(payload).then(res => {
        commit({
          type: 'save',
          payload: { number: res.number }
        });
        return res;
      });
    }
  }
};

Modules

const modules = {
  [demoModule.name]: demoModule,
  [otherModule.name]: otherModule
  // ...
};

Usage

use smrCreateStore

import { smrCreateStore } from 'simple-module-redux';
import reduxLogger from 'redux-logger';
const store = smrCreateStore(
  modules,
  preloadedState,
  applyMiddleware(reduxLogger)
);
store.dispatch({
  type: 'demo/add',
  payload: 5
});
store.dispatch({
  type: 'demo/minus',
  payload: 3
});
store.dispatch({
  type: 'demo/asyncUpdate',
  payload: 666
});

use smrEnhancer

import { createStore, compose } from 'redux';
import { smrEnhancer } from 'simple-module-redux';
import reduxLogger from 'redux-logger';
import modules from './modules';
const store = createStore(
  modules,
  preloadedState,
  compose(
    smrEnhancer,
    applyMiddleware(reduxLogger)
  )
);

use smrMiddleware & generateReducer

import { createStore, applyMiddleware } from 'redux';
import { smrMiddleware, generateReducer } from 'simple-module-redux';
import reduxLogger from 'redux-logger';
import modules from './modules';
const reducer = generateReducer(modules);
const store = createStore(
  reducer,
  preloadedState,
  applyMiddleware(smrMiddleware, reduxLogger)
);

plugins

We has most popular plugin, smr-plugin-immer, smr-plugin-loading.

use smrCreateStoreWithPlugin

import { smrCreateStoreWithPlugin } from 'simple-module-redux';
import withImmer from 'smr-plugin-immer';
import withLoading from 'smr-plugin-loading';
import reduxLogger from 'redux-logger';
const smrCreateStore = smrCreateStoreWithPlugin([withImmer(), withLoading()]);
const store = smrCreateStore(
  modules,
  preloadedState,
  applyMiddleware(reduxLogger)
);

use smrEnhancerWithPlugin

import { createStore, compose } from 'redux';
import { smrEnhancerWithPlugin } from 'simple-module-redux';
import withImmer from 'smr-plugin-immer';
import withLoading from 'smr-plugin-loading';
import reduxLogger from 'redux-logger';
import modules from './modules';
const smrEnhancer = smrEnhancerWithPlugin([withImmer(), withLoading()]);
const store = createStore(
  modules,
  preloadedState,
  compose(
    smrEnhancer,
    applyMiddleware(reduxLogger)
  )
);

use smrMiddleware & generateReducer

import { createStore, applyMiddleware } from 'redux';
import { smrMiddleware, generateReducer } from 'simple-module-redux';
import withImmer from 'smr-plugin-immer';
import withLoading from 'smr-plugin-loading';
import reduxLogger from 'redux-logger';
import modules from './modules';
const reducer = generateReducer(modules, [withImmer(), withLoading()]);
const store = createStore(
  reducer,
  preloadedState,
  applyMiddleware(smrMiddleware, reduxLogger)
);