Redux繁琐模板写法解决方案

Redux繁琐模板写法解决方案

0. 你是否遇到过，在使用redux时频繁在action(actionType)，reducer，saga中来回切换文件。
1. 你是否遇到过，须要完成一个小小的功能，却须要建立至少三个文件action``reducer``saga。
2. 你是否遇到过，成天纠结究竟是应该为了不繁琐，直接将相关业务直接写在组件中，仍是为了分层解耦，不耐烦的建立一个又一个模板文件。
3. ...

解决方案构思

• Redux自己函数式编程风格带给咱们的是代码足够的简单，没有任何的黑魔法，彻底就是一个一个的纯函数，基于此特性决定不更换Redux自己。
• 在学习Redux文档的过程当中，有一节讲的是缩减样本代码，受此文章的启发，决定尝试能不能根据配置生成须要的action``reducer``saga。
• 对比模板文件发现action自己能够不存在，只是为了将各个地方的代码联系起来，方便代码阅读和维护，基于此能够考虑直接使用一个方法生成action和reducer。
• 同时为了集成saga，又不破坏原有的耦合特性，故采用约定大于配置，在action的方法名前加_的方式。
• 在尝试过程当中发现为了所需的配置模板的风格与Dva甚是类似，怀疑过是否是与Dva的功能重复，期间学习过Dva的代码，发现仍是出发点不同。
• 本解决方案没有任何的黑魔法，只是换了一种代码组织方式，将action``reducer``saga的功能集中于一处，不须要任何的附加api学习成本。

Installation

• Using npm: npm install redux-template --save
• Using Yarn: yarn add redux-template

Example

建立配置

@注: 使用ts及class是为了代码提示方便，若是不须要可参考js版

import {creator, BaseConfig} from "./reduxFactory";

class Test extends BaseConfig {
  namespace = 'test';

  initState = {
    num: 1
  };

  add = (payload: {
    number: number
  }, state?: any) => {
    return {
      num: state.num + payload.number
    }
  };

  _add = function *() {
    yield console.log('啦啦啦');
  };
}

export default creator<Test>(new Test());
复制代码

使用配置

// reducer
import { combineReducers } from 'redux'
import Test from "../Test";

export default combineReducers({
  test: Test.reducer
})

// saga
import {all} from "redux-saga/effects";
import Test from '../Test';

export default function* () {
  yield all([
    Test.saga()
  ]);
};
复制代码