☰

Typescript を使用した Redux Thunk 質問する

tag-icon • tag-icon javascript reactjs typescript redux
Typescript を使用した Redux Thunk 質問する

私は Typescript を学習しており、シンプルな React/Redux アプリを実装しようとしています。同期アクションを使用すると正常に動作しますが、非同期アクションに問題があります。私は公式の redux チュートリアルに従っています。

まずセッションの状態を宣言します

export interface UserSessionState {
  loggedIn: boolean;
}

次にアクションのインターフェースを宣言します

interface UpdateSessionAction {
  type: 'USER_LOGIN';
  payload: boolean;
}

ユニオン型でエクスポートします

export type UserActionTypes = UpdateSessionAction;

そして実際のアクション


export function updateSession(loggedIn: UserSessionState) {
  return {
    type: 'USER_LOGIN',
    payload: loggedIn,
  };
}

偽のAPI呼び出しがあります

function api() {
  return Promise.resolve(true);
}

そして最後にログイン

export const userLogin = (): ThunkAction<
  void,
  {},
  {},
  AnyAction
> => async (dispatch: ThunkDispatch<{}, {}, AnyAction>) => {
  const res = await api();
  dispatch(updateSession({ loggedIn: res }));
};

リデューサーでは、状態を初期化するだけです

initialState: UserSessionState = {loggedIn: false}

次に、リデューサーに対して通常の redux 処理を実行します。

最後に、ストアで状態を確認するための初期アクションを呼び出します

store.dispatch(userLogin());

このエラーが繰り返し発生します:

Argument of type 'ThunkAction<Promise<void>, {}, {}, AnyAction>' is not assignable to parameter of type 'AnyAction'.
  Property 'type' is missing in type 'ThunkAction<Promise<void>, {}, {}, AnyAction>' but required in type 'AnyAction'.

何かが足りないtypeのですが、何が間違っているのか全く分かりません。

ベストアンサー1

要するに：

このエラーが発生するのは、userLogin()関数から返されたのが でありThunkAction、これが欠落しているためです。type

なぜこのようなことが起こるのでしょうか?

ディスパッチは 型のパラメータを受け入れる必要がありますAnyAction。は、 (必須プロパティ を持つ)AnyActionを拡張する redux 型です。Actiontype

これは現在のredux タイプファイル

export interface Action<T = any> {
  type: T
}

/**
 * An Action type which accepts any other properties.
 * This is mainly for the use of the `Reducer` type.
 * This is not part of `Action` itself to prevent users who are extending `Action.
 */
export interface AnyAction extends Action {
  // Allows any extra properties to be defined in an action.
  [extraProps: string]: any
}

どうすれば修正できますか?ThunkDispatchreduxの標準の代わりにtypeを使用しますDispatch。次の例とその他の例は、この要点 

const mapDispatchToProps = (dispatch: ThunkDispatch<MyState, void, Action>) => {
  return {
    onRequestClick: (arg: any) => dispatch(myAsyncAction(arg)),
  };
}

こちらもご覧ください記事、 セクションディスパッチをPropsにマップする

おすすめ記事