使用Typescript定制版Redux,我的业务代码减了一半



  • 想必用过Redux的朋友都知道,写一个完整的状态存储需要经过多道工序:1、定义type,2、写action,3、写reducer,4、在reducer中使用type定位到dispatch内容。如果是接口请求,那就更麻烦了,一个action要写3个type,还要写thunk或者使用saga之类的异步辅助,然后在reducer中针对请求前后重复地定义loading=true | false。这一套流程下来,5分钟差不多过去了,如果增删改查都要写一套,那就自求多福吧

    以上就是原生redux的繁琐之处,笔者可能写了两年这种代码。

    2018年末,笔者开始转战Typescript,并使用ts开发了React+Redux项目。整体做下来的感受就是,太TM繁琐了。。。reducer的每个case的response都不一样,每次都需要定义。action想用promise,需要额外改造。

    期间笔者曾想寻找替代方案,但都被否决。

    • dva: 不够简洁,要写action.type,容易出错。要写dispatch()。Typescript支持很一般
    • rematch: 要写action.type,容易出错。要写dispatch()。Typescript支持很一般
    • mobx: 各种observer装饰器,不够简洁,代码量上去了。修改state太随意,团队协作不好掌控。不支持hooks。

    福音

    经过笔者的苦心钻研和精心打磨,提炼出一套既能弥补原生Redux的繁琐,让代码瞬间减少一半,又能最大化支持Typescript的框架Redux Model

    特性

    • 代码十分简洁,超高开发效率
    • 完美支持Typescript,一次注入,各处业务100%无死角提示
    • Reducer修改使用mvvm特性,拒绝各种 state = { ...state, xxx: yyy } 的浪费时间写法
    • 异步请求内置service,简单配置即可使用
    • 异步请求自带loading状态
    • 完美支持React Hooks

    Demo

    interface Response {
      id: number;
      name: string;
    }
    
    interface Data {
      counter: number;
      users: Partial<{
        [key: string]: Response;
      }>;
    }
    
    class TestModel extends Model<Data> {
        increase = this.action((state) => {
            state.counter += 1;
        });
    
        getUser = $api.action((id) => {
            return this
                .get<Response>('/api/user/' + id)
                .onSuccess((state, action) => {
                    state.counter += 1;
                    state.users[id] = action.response;
                });
        });
    
        deleteUser = $api.action((id) => {
            return this
                .delete('/api/user' + id)
                .onSuccess((state) => {
                    state.counter -= 1;
                    state.users[id] = null;
                });
        });
    
        protected initReducer(): Data {
            return {
                counter: 0,
                users: {},
            };
        }
    }
    
    

    如果不过瘾,可以看完整的demo项目:web-demo,或者在线文档:documents

    支持平台

    • React Web
    • React Native
    • Vue
    • Taro

    写Typescript的小伙伴赶紧试试吧,项目地址:https://github.com/fwh1990/redux-model

    开源不易,请记得给个star呦



  • Javascript项目也能用,只是提示没那么多了


Log in to reply