typescript - 使用 typescript 在 Redux thunk 中返回 promise

Question

我收到此 typescript 错误:Property 'then' does not exist on type 'ThunkAction<Promise<boolean>, IinitialState, undefined, any>'.

请帮忙!

我如何配置我的商店并包含类型:

    return createStore(
      rootReducer,
      intialState,
      require('redux-devtools-extension').composeWithDevTools(
        applyMiddleware(
          thunk as ThunkMiddleware<IinitialState, any>,
          require('redux-immutable-state-invariant').default()
        )
      )

Action 创作者:

type ThunkResult<R> = ThunkAction<R, IinitialState, undefined, any>;

export function anotherThunkAction(): ThunkResult<Promise<boolean>> {
  return (dispatch, getState) => {
    return Promise.resolve(true);
  }
}

然后在我的组件中有一个 prop 接口(interface):

interface IProps {
  anotherThunkAction: typeof anotherThunkAction;
}

然后:

  componentWillMount() {
    this.props.anotherThunkAction().then(() => {console.log('hello world')})
  }

连接我正在使用 react-i18next 的地方:

export default translate('manageInventory')(
  connect(
    mapStateToProps,
    {
      anotherThunkAction
    }
  )(ManageInventory)
);

Answer 1

我认为你没有正确地发送东西......你在调用你的 Action 时没有将它传递给商店。

如果您直接调用操作，您将返回:

ThunkAction<Promise<boolean>, IinitialState, undefined, any>

正如 tsc 告诉您的那样，没有 then功能。当你通过 dispatch 运行某些东西时它变成了ThunkResult<R>进入R

你还没有展示你是如何connect你的组件到商店 - 但我认为这就是问题所在。这是一个示例:

type MyThunkDispatch = ThunkDispatch<IinitialState, undefined, any>

const mapDispatchToProps = (dispatch: MyThunkDispatch) => ({
  anotherThunkAction: () => dispatch(anotherThunkAction())
})

connect(null, mapDispatchToProps)(MyComponent)

这将添加 anotherThunkAction至 props你可以调用它，它会正确调用你的操作并返回 promise 。