Redux Toolkit で Redux を簡素化する方法

これらの疑問に対して、Redux の作成者である Dan Abramov 氏は、「Redux は必要ないかもしれない」というタイトルの記事を公開し、必要な場合にのみ Redux を使用し、それほど複雑でないアプリケーションを開発する場合は他の方法に従うことを提案しました。

Redux Toolkitが解決する問題

Redux Toolkit (旧称 Redux Starter Kit) は、グローバルストアを構成し、Redux API を可能な限り抽象化することでアクションとリデューサーの作成をより効率的にするためのオプションを提供します。

何が含まれていますか?

Redux Toolkit には、Immer、Redux-Thunk、Reselect などの便利なパッケージが付属しています。これにより、React 開発者の作業が大幅に楽になり、状態を直接変更したり (不変性を処理せずに)、Thunk などのミドルウェアを適用したり (非同期操作を処理) できるようになります。また、リデューサー機能を簡素化するために、Redux 用のシンプルな「セレクター」ライブラリである Reselect も使用します。

Redux Toolkit API の主な機能は何ですか?

以下は、既存の Redux API 関数を抽象化した Redux Took Kit で使用される API 関数です。これらの関数は Redux フローを変更するものではなく、より読みやすく管理しやすいように簡素化するだけです。

configureStore: Redux の元の createStore と同じように Redux ストアインスタンスを作成しますが、名前付きオプションオブジェクトを受け入れ、Redux DevTools 拡張機能を自動的に設定します。
createAction: アクションタイプの文字列を受け入れ、そのタイプを使用するアクション作成関数を返します。
createReducer: 初期状態値とアクションタイプのルックアップテーブルをリデューサー関数に受け入れ、すべてのアクションタイプを処理するリデューサーを作成します。
createSlice: 初期状態と、リデューサー名と関数を含むルックアップテーブルを受け入れ、アクションクリエーター関数、アクションタイプ文字列、およびリデューサー関数を自動的に生成します。

上記の API を使用すると、特に createAction メソッドと createReducer メソッドを使用して、Redux の定型コードを簡素化できます。ただし、アクションクリエーターとリデューサー関数を自動的に生成する createSlice を使用すると、これをさらに簡略化できます。

createSlice の特別な点は何ですか?

メモリスライスを生成するヘルパー関数です。スライスの名前、初期状態、およびリデューサー関数を受け入れて、リデューサー、アクションタイプ、およびアクションクリエーターを返します。

まず、従来の React-Redux アプリケーションでリデューサーとアクションがどのように見えるかを見てみましょう。

アクション

「../constant/constants」から {GET_USERS、CREATE_USER、DELETE_USER} をインポートします。
エクスポート const GetUsers = (データ) => (ディスパッチ) => {
 急送（{
 タイプ: GET_USERS、
 ペイロード: データ、
 });
};
エクスポート const CreateUser = (データ) => (ディスパッチ) => {
 急送（{
 タイプ: CREATE_USER、
 ペイロード: データ、
 });
};
エクスポート const DeleteUser = (データ) => (ディスパッチ) => {
 急送（{
 タイプ: DELETE_USER、
 ペイロード: データ、
 });
};

減速機

「../constant/constants」から {GET_USERS、CREATE_USER、DELETE_USER} をインポートします。
定数初期状態 = {
 エラーメッセージ: "",
 読み込み中: false、
 ユーザー:[]
};
const UserReducer = (state = initialState, { ペイロード }) => {
スイッチ（タイプ）{
 GET_USERSの場合:
 return { ...state、users: payload、loading: false };
CREATE_USERの場合:
 戻り値 { ...状態、ユーザー: [ペイロード、...状態.ユーザー]、
 読み込み中: false };
DELETE_USERの場合:
 戻り値 { ...状態、 
 ユーザー: state.users.filter((user) => user.id !== payload.id),
、読み込み中: false };
デフォルト：
 状態を返します。
 }
};
デフォルトの UserReducer をエクスポートします。

ここで、createSlice を使用して同じ機能を簡素化して実現する方法を見てみましょう。

'@reduxjs/toolkit' から createSlice をインポートします。
エクスポートconst初期状態= {
 ユーザー: [],
 読み込み中: false、
 エラー: 偽、
};
定数userSlice = createSlice({
 名前: 'ユーザー',
 初期状態、
 リデューサー: {
  getUser: (状態、アクション) => {
   アクションのペイロードをstate.usersに設定します。
   状態.loading = true;
   状態.エラー = false;
  },
  createUser: (状態、アクション) => {
   state.users.unshift(アクション.payload);
   状態.loading = false;
  },
  deleteUser: (状態、アクション) => {
   state.users.filter((user) => user.id !== action.payload.id);
   状態.loading = false;
  },
 },
});
エクスポート const { createUser、deleteUser、getUser } = userSlice.actions;
デフォルトの userSlice.reducer をエクスポートします。

ご覧のとおり、すべてのアクションとリデューサーが 1 つのシンプルな場所にまとめられています。従来の Redux アプリケーションでは、各アクションとそれに対応するリデューサーのアクションを管理する必要がありましたが、createSlice を使用する場合は、アクションを識別するために switch を使用する必要がありません。

一般的な Redux フローでは、状態の変更時にエラーが発生するため、これを克服するには、スプレッド演算子やオブジェクトの割り当てなどの特別な JavaScript 戦略が必要になります。 Redux Toolkit は Immer を使用するため、状態の変化について心配する必要はありません。スライスはアクションとリデューサーを作成するため、以下に示すように、アクションとリデューサー用に個別のファイルとディレクトリを作成しなくても、それらをエクスポートしてコンポーネントとストアで使用し、Redux を構成できます。

"@reduxjs/toolkit" から configureStore をインポートします。
「./features/user/userSlice」からuserSliceをインポートします。
エクスポートデフォルトconfigureStore({
 リデューサー: {
 ユーザー: userSlice、
 },
});

このストアは、useSelector と useDispatch を使用して、redux API 経由でコンポーネントから直接使用できます。操作を識別するために定数を使用したり、型を使用したりする必要はありません。

非同期Reduxフローの処理

非同期アクションを処理するために、Redux Toolkit は、文字列識別子とペイロード作成者コールバックを受け入れ、実際の非同期ロジックを実行し、返された Promise とリデューサーで処理できるアクションタイプに基づいて、関連付けられたアクションのディスパッチを処理する Promise を返す、createAsyncThunk と呼ばれる特別な API メソッドを提供します。

「axios」からaxiosをインポートします。
"@reduxjs/toolkit" から createAsyncThunk をインポートします。
エクスポートconst GetPosts = createAsyncThunk(
"post/getPosts"、async() => axios.get(`${BASE_URL}/posts`) を待機します
);
エクスポートconst CreatePost = createAsyncThunk(
"post/createPost"、async (post) => axios.post(`${BASE_URL}/post`、post) を待機します。
);

従来のデータフローとは異なり、createAsyncThunk によって処理されるアクションは、シャード内の extraReducers セクションによって処理されます。

"@reduxjs/toolkit" から createSlice をインポートします。
「../../services」から { GetPosts、CreatePost } をインポートします。
エクスポートconst初期状態= {
 投稿: [],
 読み込み中: false、
 エラー: null、
};
エクスポートconst postSlice = createSlice({
名前: "投稿",
初期状態: 初期状態、
追加リデューサー: {
  [GetPosts.fulfilled]: (状態、アクション) => {
   アクションのペイロードデータを取得します。
  },
  [GetPosts.rejected]: (状態、アクション) => {
  状態.posts = [];
  },
  [CreatePost.fulfilled]: (状態、アクション) => {
  state.posts.unshift(アクション.ペイロード.データ);
  },
 },
});
デフォルトの postSlice.reducer をエクスポートします。

extraReducers 内では、満たされた状態と拒否された状態の両方を処理できることに注意してください。

これらのコードスニペットを使用すると、このツールキットが Redux のコードをいかに簡素化できるかがわかります。参考までに、Redux Toolkit を利用した REST の例を作成しました。