aqua actions
可以帮助简化redux
的样板代码,同时auqa actions
由ts
编写,具备完整的类型推倒,充分提高开发效率.
整个库包含由两个 API createAction
,createReducer
和一个reducer
生成类ReducerCreator
构成,具体详情见下文.
// NPM
npm install aqua-actions -S
//YARN
yarn add aqua-actions
-
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}
-
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();
-
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;
-
-