@lxjx/rc-durex v0.0.15

#rc-durex

Introduce

以模块的方式处理细化并处理reduer、effect等，帮助你快速创建redux应用。

Installation

yarn add @lxjx/rc-durex
// or
npm install @lxjx/rc-durex

Usage

1. 创建模块文件

/* model.js */

// model userInfo
export let userInfo = {
  namespace: 'userInfo',
  state: {
    name: 'lxj',
  },
  reducers: {},
};

// model lists

export let lists = {
  // 此model的命名空间，如果不存在，取导出时的对象名lists
  namespace: 'lists',
  // 此model的默认state，推荐的做法是一开始就把所有会用到的state罗列出来并适当注释，方便追溯state来源。
  state: {    
    goods: [],
  },
  // 此model下的reducers
  reducers: {
    setList(state, action) {
      return { ...state, ...action };
    },
  },

  // 这里集中存放带副作用的方法
  effects: {
    // 接收action、以及redux的dispatch、getState组成的对象以及用于执行effect操作的方法effect作为参数
    async changeList(action, { dispatch, getState, effect }) {  
      let { userInfo } = getState();  // 获取当前state树上的任意值

      let msg = await delay(3000);  // 进行一些一步操作
      
      dispatch({  // 发起action改变状态
        type: 'lists/setState',
        goods: msg || [],
      });

      return 'dispatch complete'; // 返回会传递给dispatch(action).then(res => {})中的res作为参数
    },
  },
};

2. 整合model，创建store

// App.js
import rcDurex from '@lxjx/rc-durex';

import * as models from '../model.js';
let store = rcDurex(models);

export default function App(props) {
  return (
    <Provider store={store}>
      <div>
        App
      </div>
    </Provider>
  );
}

3. 执行reducer、effect

// reducer
store.dispatch({
  type: 'userInfo/setState',
  name: 'lxj',
});

// effect
store.effect({
  type: 'lists/changeList',
  goods: ['apple', 'banana'],
});

// effect可以通过then来监听effect的结束以及结束返回值
store.effect({
  type: 'lists/changeList',
  goods: ['apple', 'banana'],
}).then(res => {
  console.log(res);
});