dispatch：Dispatch 为什么有时需要精确操作？

Question

我遇到了一个问题，可能是因为我正在尝试使用打字稿进行一些新的操作（键入redux的东西），

这是我的错误消息：

Argument of type '(dispatch: Dispatch<AnyAction>) => Promise<string>' is not assignable to parameter of type 'AnyAction'.
  Property 'type' is missing in type '(dispatch: Dispatch<AnyAction>) => Promise<string>' but required in type 'AnyAction'.  TS2345

这里的事情是我不太明白为什么会出现此错误，因为typeScript只是将错误投在了这个错误上而不是在另一个错误上，所以我很困惑。

我的代码（带有错误）：

/Action/userAction.js
___________________________________________________
export const signOut = () => async (dispatch: Dispatch) => {
  try {
    dispatch(UserSignoutAction());
    dispatch(InitialErase());
    dispatch(signOutSessionInitial());
    dispatch(isLogout());
    persistor.flush();
    return "done";
  } catch (e) {
    const error = await e;
    throw error;
  }
};

/NavBar/container.js
_______________________________________________
const mapDispatchToProps = (
  dispatch: Dispatch
): {
  signOut: () => Promise<String>;
} => ({
  signOut: () => dispatch(signOut()),
});

此示例抛出一个错误，我可以使用signOut: () => dispatch<any>(signOut()),解决我可以理解，我需要键入ok（但是不知道我需要什么，但是目前我为什么要输入any））

其他代码（无错误）：

/Action/userAction.js
___________________________________________________
export const sessionInitial = (
  session_id: number
): sessionInitialActionOption => ({
  type: SESSION,
  payload: session_id
});

/Dashboard/container.js
_______________________________________________
const mapDispatchToProps = (
  dispatch: Dispatch
): {
  sessionInitial: (
    session_id: number
  ) => {
    type: string;
    payload: number;
  };
} => ({
  sessionInitial: (session_id: number) => dispatch(sessionInitial(session_id))
});

我猜我的错误是我想通过一个函数执行多个Actions Creator。我认为这样做不是一个好方法，或者此解决方案还可以，但在mapDispatchToProps中放入/调用很可笑。

感谢您帮助我理解这部分的工作原理，非常复杂。

---

___________________________解决方案？____________________________

---

我找到了哈桑·纳克维（Hassan Naqvi）提示的解决方案！以下代码对我有用：

const mapDispatchToProps = (
  dispatch: ThunkDispatch<
    void,
    void,
    | UserActionsType            //one of my actionsType
    | sessionActionsType         //one of my actionsType
    | isConnectActionsType       //one of my actionsType
    | initialUserActionsType     //one of my actionsType
  >
): {
  signOut: () => void;
} => ({
  signOut: () => dispatch(signOut())
});

或

type ApplicationDispatch = ThunkDispatch<IStoreState, void, AnyAction> & Dispatch

const mapDispatchToProps = (
  dispatch: ApplicationDispatch
): {
  signOut: () => void;
} => ({
  signOut: () => dispatch(signOut())
});

export default compose<any>(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
);

我不是很了解为什么行得通，而不是上面的步骤...但是我仍然会尝试理解为什么redux-thunk？以及为什么Dispatch中的redux不够（可能是因为actionType包含/发送了函数ThunkDispatch），为什么不仅仅用actionsType替换'any'signOut: () => dispatch<any>(signOut())？ （不为我工作）

Dispatch和ThunkDispatch有什么区别？

希望大家阅读这篇文章，希望我会读一些会改变我生活的文章！是放纵的家伙。祝你有美好的一天！

---

-如您在上面看到的，当您使用redux-thunk处理异步操作时，该操作到达最内部的函数actionFunction，该函数负责执行该操作。但是此分派是我们在中间件中创建的，而不是来自createStore的分派，它具有侦听器并将值传递给reducer。

-向减速器的调度是从其父函数nextFunction发生的。

（来源：https://medium.com/@gethylgeorge/understanding-how-redux-thunk-works-72de3bdebc50）

其他有用的链接：https://daveceddia.com/what-is-a-thunk/

因此，如果我真的了解发生了什么，除Dispatch之外，ThunkDispatch可以执行或不执行fct，异步fct。调度正在将Actions Creator调用到减速器。

如果我想念，请告诉我，我会改正。

希望能对您有所帮助！

Answer 1

问题是，您正在为Dispatch中的第一个参数使用类型mapDispatchToProps。

由于您正在使用redux-thunk，因此需要使用从ThunkDispatch导入的redux-thunk类型。

所以您的NavBar / container.ts应该变成：