redux异步action + typescript 处理

dispatch action的dispatch类型：

• 同步action  dispatch类型为来自redux库的Dispatch
• 异步action dispatch类型为来自redux-thunk库的ThunkDispatch

案例如下：

1、同步action

import { Dispatch } from "redux";  //非异步action使用redux库中的dispatch: Dispatch

......
const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    getAnchorRankList: () => dispatch(getAnchorRankList()),
  };
};

export default connect(mapSateToProps, mapDispatchToProps)(AnchorRank);

2、异步action

import { ThunkDispatch } from "redux-thunk";  //异步action使用redux-thunk库中的dispatch: ThunkDispatch

interface DefaultProps {
  list: T;
  errorMsg: string;
  loadStatus: LoadStatus;
}
interface IActionType {
  type: string;
}
type IAction = IActionType & Partial>;
interface ReduxStateProps {
  AnchorRankReducer: DefaultProps;
}
interface IExtraDispatchArguments {}

const mapDispatchToProps = (
  dispatch: ThunkDispatch
) => {
  return {
    getAnchorRankList: () => dispatch(getRankList(anchorRankList)),
  };
};




import { Dispatch } from "redux";
getRankList=()=>{
     return (dispatch: Dispatch) => {..异步操作...}
}

export interface ThunkDispatch {
  (asyncAction: ThunkAction): R;
  (action: T): T;
}

ThunkDispatch是一个泛型，有三个参数：

1. 第一个：store state
2. 第二个：IExtraDispatchArguments
3. 第三个：action props

注意：虽然使用combineReducers将拆分的reducer合并，并且不同的states在不同的key下，但是属于同一个stroe，不能重名，否则数据会覆盖