使用 typescript 在 Redux thunk 中返回一个 Promise

Posted 2023-02-22

【中文标题】使用 typescript 在 Redux thunk 中返回一个 Promise

【英文标题】：Returning a promise in a Redux thunk with typescript

【发布时间】：2019-01-24 16:56:27

【问题描述】：

我收到此打字稿错误：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()
        )
      )

动作创建者：

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

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

然后在我的组件中我有一个道具接口：

interface IProps 
  anotherThunkAction: typeof anotherThunkAction;

然后：

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

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

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

【参考方案1】：

感谢这篇文章，当您必须在 reducer 之间共享切片时，执行 thunk 和 createSlice 有点棘手

【参考方案2】：

我认为您没有正确地分派东西......您在调用您的操作时没有将其传递给商店。

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

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，您可以调用它，它会正确调用您的操作并返回承诺。

【讨论】：

感谢@tswaters，这帮助我意识到我需要提供更多细节。我更新了我的问题。哎呀，在接线时涉及到很多部分。如果我错了，请纠正我，但我相信由于我在 applyMiddleware 函数中添加类型，我不需要在我的所有 mapDispatchToProps 函数中添加类型。

@jfbloom22 你是对的。我也遇到了同样的事情，并试图找出最好的打字方式。老实说，我认为 redux-thunk 和 redux 可能没有正确的类型...除了mapDispatchToProps 函数之外，我可以输入所有内容

有办法解决这个问题吗？ const mapDispatchToProps = (dispatch: ThunkDispatch) => ( dispatch: (arg: any) => dispatch(dispatch(arg)) ) this.props .dispatch(createClient(this.state.name)) .then(client = > this.props.history.push(/clients/$client.payload.id); )