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()
  ]);
};
複製代碼