web-dev-qa-db-ja.com

TypescriptでReduxサンクで約束を返す

この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()
        )
      )

アクションクリエーター：

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)
);
typescriptredux-thunk
6
jfbloom22

あなたは物事を適切に発送しているとは思いません...あなたはそれを店に通さずにあなたの行動を呼んでいます。

アクションを直接呼び出すと、元に戻ります：

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が返されます。

3
tswaters