Redux繁琐模板写法解决方案

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

解决方案构思

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()
  ]);
};

最后编辑于：2019.06.21 18:04:43