Redux繁琐模板写法解决方案



  • Redux繁琐模板写法解决方案

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

    解决方案构思

    • Redux本身函数式编程风格带给我们的是代码足够的简单,没有任何的黑魔法,完全就是一个一个的纯函数,基于此特性决定不更换Redux本身。
    • 在学习Redux文档的过程中,有一节讲的是缩减样本代码,受此文章的启发,决定尝试能不能根据配置生成需要的action reducer saga
    • 对比模板文件发现action本身可以不存在,只是为了将各个地方的代码联系起来,方便代码阅读和维护,基于此可以考虑直接使用一个方法生成actionreducer
    • 同时为了集成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()
      ]);
    };