0

シナリオ

2つのAPI呼び出しがあります

  1. ユーザーIDを取得するためにA（呼び出し）を要求します
  2. userId (ex. /${userId}/detail) を使用して B (呼び出し) を要求します。

応答データはreduxストアに保存されます

  1. userId がグローバル状態として既に存在する場合は、この値を使用して B リクエストを作成できます。
  2. userId がグローバル状態として存在しない場合は、B を要求する前に A を要求し、次に userId がグローバル状態に追加されたときに B を要求します (同期的に操作する必要があります) 。

私は次の方法で試しました：

  1. 約束を使用します。ここでは、userId がストアに存在するかどうかを確認しません。userId がストアに存在する場合でも、無条件に 2 回要求するため、これは好ましくありません。
export const getUserDetailData = createAsyncThunk(
  'user/detail',
   (url: string, { getState, dispatch }) => {
      dispatch(getUserData())
              .then((user)=> client.get(`/${user.id}/${url}`))
              .then(res=>res)
  }
);
  1. redux-thunkが提供する関数(getState)を利用した方法です。
export const getUserDetailData = createAsyncThunk(
  'user/detail',
  async (url: string, { getState, dispatch }) => {
    // "getState()" method to check if the desired data is present
    if (!(getState() as RootState).user.data) {
      // If there is no userId, a request is made to get the user's id.
      await dispatch(getUserData());
    }

    // Get the value of the global store again and use userId
    const userId = (getState() as RootState).user.data
    const response = await client.get<APIData<any>>(`/${userId}/${url}`);
    return response;
  }
);

質問

私が疑問に思っているのは、

ケース 2 の場合、毎回 getState でリアルタイムに保存された値を呼び出して使用するよりも、サンク スタイルの方法はありますか?

4

0 に答える 0