aqua-actions v0.2.0

auqa actions

简介

aqua actions可以帮助简化redux的样板代码,同时auqa actions由ts编写,具备完整的类型推倒,充分提高开发效率.

整个库包含由两个 API createAction,createReducer和一个reducer生成类ReducerCreator构成,具体详情见下文.

快速开始

安装

// NPM
npm install aqua-actions -S

//YARN
yarn add aqua-actions

创建action

• redux 原始方法

  const ADD_TYPE = "ADD";
  interface IAddAction<T = any> {
    type: typeof ADD_TYPE;
    payload: T;
  }
  const add = <T = any>(payload: T): IAddAction<T> => {
    return { type: ADD_TYPE, payload };
  };
  
  // add()     --->  { type: "ADD"}
  // add(100)  --->  { type: "ADD", payload: 100}

• auqa actions

  const add = createAction<T>("ADD");
  
  // add()     --->  { type: "ADD"}
  // add(100)  --->  { type: "ADD", payload: 100}

创建reducer

• redux原始方法

  const initState = { sum: 0 };
  const reducer = (state = initState, action: IAddAction) => {
    switch (action.type) {
      case ADD_TYPE:
        return { ...state, sum: state.sum + action.payload };
      default:
        return state;
    }
  };

• aqua actions

  const initState = { sum: 0 };
  const reducer = createReducer(initState)
    .handleAction(add, (state, action) => {
      return { ...state, sum: state.sum + action.payload };
    })
    .build();

API

• createAction和createStandardAction 两者的区别在于,createStandardAction中payload是必填项.

  const createAction = <P = any, M = any>(
    type: string
  ): BasicActionCreator<P, M> => (payload?: P, meta?: M) => {
    return { type, payload, meta };
  };
  
  type BasicActionCreator<P = any, M = any> = (
    payload?: P,
    meta?: M
  ) => BasicActionType<P, M>;
  
  type BasicActionType<P = any, M = any> = {
    type: string;
    payload?: P;
    meta?: M;
  };
  
  const createStandardAction = <P = any, M = any>(
    type: string
  ): StandardActionCreator<P, M> => (payload: P, meta?: M) => {
    return { type, payload, meta };
  };
  
  type StandardActionCreator<P = any, M = any> = (
    payload: P,
    meta?: M
  ) => StandardActionType<P, M>;
  
  type StandardActionType<P = any, M = any> = {
    type: string;
    payload: P;
    meta?: M;
  };
  
  type ActionType<P = any, M = any> =
    | BasicActionType<P, M>
    | StandardActionType<P, M>;
  
  type ActionCreator<P = any, M = any> =
    | BasicActionCreator<P, M>
    | StandardActionCreator<P, M>;

• createReducer

  export const createReducer = <T = any>(initState: T) =>
    new ReducerCreator<T>(initState);

  • ReducerCreator 通过链式调用.handleAction添加处理分支,末尾调用.build()返回完整reducer.

    • handleAction

          handleAction<A extends ActionType = ActionType>(
          type: ((payload?:any, meta?:any) => A) | string,
          handler: ReducerHandeler<T, A>
      ) :this

    • build

          build(): (state = this.initState, action: ActionType)=> T

    • ReducerHandeler

      type ReducerHandeler<T = any, A extends ActionType = ActionType> = (
        state: T,
        action: A
      ) => T;