Redux Toolkit: サンク関数の作成

サンクとは何ですか？

プログラミングでは、サンクという言葉は、JavaScript の非同期関数など、遅延した作業を実行するコードの部分を指します。

Redux ストア自体は、非同期ロジックを処理しません。以下の方法のみを知っています:

1. アクションを同期的にディスパッチします。
2. リデューサー経由で状態を更新します。
3. 状態の変化について UI に通知します。

しかし、待ってください。その場合、どのようにして API を呼び出し、その応答に基づいて状態を更新すればよいでしょうか。これには通常時間がかかります。それにはどう対処すればよいでしょうか?

ここでサンク関数が登場します。

サンク関数とは何ですか?

サンク関数は、API の呼び出しなど、非同期ロジックを処理するために作成された関数です。アクションをディスパッチし、必要に応じて現在の状態にアクセスするには、dispatch と getState の 2 つの引数を取ります。

const getAllUsers = () => {
  return async (dispatch, getState) => {
    dispatch(fetingAllUsers());
    try {
      const users = await getUsers();
      dispatch(userUpdated(users));
    } catch (err) {
      dispatch(logError(err))
    }
  }
}

返される関数はサンク関数で、この例では getAllUsers はサンク アクション クリエーターと呼ばれ、次のようにディスパッチされます。

dispatch(getAllUsers())

サンク アクション クリエーターは、必要に応じて、サンク関数で使用される引数を指定してディスパッチできます。

createAsyncThunk を使用したサンクの作成

Redux Toolkit は、サンクを簡単に生成する createAsyncThunk API を提供します。

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUserById = createAsyncThunk(
  'user/fetchUserById',
  async (userId) => {
    const user = await someHttpRequest(userId);
    return user;
  }
);

fetchUserById は、ここで作成したサンク関数です。 createAsyncThunk は 2 つの引数を取ります:

• 最初の引数は、生成されたアクション タイプに使用される文字列プレフィックスです (例: user/fetchUserById/pending、user/fetchUserById/fulfilled、または user/fetchUserById/rejected)。
• 2 番目の引数は「ペイロード作成者」関数です。必要なデータまたはエラーを含む Promise を返す必要があります。

createAsyncThunk を使用する理由

createAsyncThunk は、API 呼び出しのサンク関数を作成できることに加えて、API リクエストの状態を追跡するアクションを自動的にディスパッチします。

• pending: リクエストは進行中です。
• 満たされました: リクエストは成功しました。
• 拒否されました: リクエストは失敗しました。

これは本当に便利です。たとえば、状態が保留中のときに UI にローダーを表示し、何かが起こっていることをユーザーに知らせることができます。

スライスでのサンクの使用

fetchUserById サンクを作成したので、userSlice の extraReducers フィールドを使用して状態ステータスの変更を処理できます。

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  user: null,
  status: 'idle', // 'idle' | 'pending' | 'succeeded' | 'failed'
  error: null,
};

export const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    usernameUpdated: (state, action) => {
      state.user.username = action.payload;
    },
    emailUpdated: (state, action) => {
      state.user.email = action.payload;
    },
    userDataCleared: (state) => {
      state.user = null;
      state.status = 'idle';
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserById.pending, (state) => {
        state.status = 'pending';
      })
      .addCase(fetchUserById.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.user = action.payload;
      })
      .addCase(fetchUserById.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message || 'Something went wrong.';
      });
  },
});

export const { usernameUpdated, emailUpdated, userDataCleared } = userSlice.actions;

// Selector for the status to use in the application's components
export const selectStatus = (state) => state.user.status;

createAsyncThunk の条件

API を呼び出す前にいくつかの条件を確認したい場合はどうすればよいでしょうか?たとえば、ステータスがすでに保留中の場合、ステータスを 2 回呼び出す必要はありません。その場合、createAsyncThunk が受け入れる 3 番目の引数を使用して条件を書き込むことができます。

const getAllUsers = () => {
  return async (dispatch, getState) => {
    dispatch(fetingAllUsers());
    try {
      const users = await getUsers();
      dispatch(userUpdated(users));
    } catch (err) {
      dispatch(logError(err))
    }
  }
}

サンク関数で Typescript を使用する方法については、「Redux サンクの型チェック」を参照してください。

以上がRedux Toolkit: サンク関数の作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。