🔮 はじめに
Reactの状態管理ライブラリでよく使用されるReduxについて少し勉強したため．忘備録として簡単にまとめます．
🔮 自己紹介
初めまして．趣味でweb開発を勉強している273*(ﾂﾅｻﾝﾄﾞ) / Kei.と申します．関西の大学生です．最近はフルスタック開発やツール制作を行なっています．初心者です．
🔮 本題
Redux
公式ドキュメント
https://redux.js.org/
ReactのuseStateのように状態を管理するもの．useStateはコンポーネント単位でしか管理できないが，Reduxはアプリ全体で状態を管理(一元管理)するツールである．他のフレームワークでも利用可能．Redux Toolkitの使用が推奨されているので，ここではそれを使用する．
- 「グローバルストア」と呼ばれる場所で状態(state) を一括管理する．
- 状態を直接変更するのではなく，アクション(action) を通じてどう変えるかをReducerで定義する．
RecoilやZustand，Jotaiなど状態管理ライブラリは色々ある．
RecoilはReduxより簡単だが開発が止まっているため推奨しない．
Jotaiは日本人が作っている．
Redux Toolkit
公式ドキュメント
https://redux-toolkit.js.org/
Redux Toolkit とは，アプリケーションの状態管理をする Redux をより簡単に扱えるようにしたライブラリ．公式もこちらの仕様を推奨している．
基本用語
Store
- アプリ全体の状態を保持する．Reduxの中心的な存在．
- 各コンポーネントはストアから状態を取得したり，更新を依頼する．
import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({
reducer: {
user: userReducer,
channel: channelReducer,
}
});
State
- ストアに保存されているデータそのもの．
- アプリ全体の「現在の状態」を表す．
const initialState: InitialChannelState = {
channelId: null,
channelName: null,
};
Action
- 状態を変更するために送る指示．Acrion Createrで生成される．
// acrionの例．JSONに似たJavaScriptオブジェクト
{
"type": "user/setName", // アクションの種類を示す
"payload": "Bob" // 必要に応じてデータを含む
}
Dispatch
- アクションをストアに送るためのメソッド．
- アクションがディスパッチされるとReducer が呼び出され，状態が更新されます。
dispatch(setName("Bob"))}
dispatch({ type: "user/setName", payload: "Bob" });
Reducer
- アクションを受け取り，新しい状態を計算する純粋関数．
- 現在の状態とアクションを引数に取り，新しい状態を返す．
reducers: {
login: (state, action) => {
state.user = action.payload;
},
logout: (state) => {
state.user = null;
},
}
Selector
- ストアから必要なデータを取り出すための関数．
- コンポーネントで
useSelectorを使ってアクセスする．
const userName = useSelector((state) => state.user.name);
Slice
- state，Reducer，action creatorをまとめたもの
// 買い物かごの初期化
const initialState = {
cartItem: [], // 商品リスト
amount: 0, // 合計個数
total: 0, // 合計金額
};
const cartSlice = createSlice({
name: "cart", // sliceの名前 useSelectorで参照するときに使う
initialState, // 初期値
reducers: {}, // action creatorが含まれている(自動生成)
});
Provider
- Storeをどのコンポーネントからも使えるようにするもの．
import { Provider } from "react-redux";
import { store } from "./redux/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
動作の流れ
- ユーザが操作する．
：ボタンをクリックしたりフォームを送信したりなど，イベントをトリガーする． - Actionが生成される．
：ユーザの操作に応じてAction Creatorがアクションを生成する．
：ユーザの操作に応じて「何をしたいか（アクション）」を作るのがAcrion Creater．
// Action Createrとaction
const setName = (name) => ({
type: "user/setName",
payload: name,
});
- Dispatch でアクションをストアに送る
：アクションがdispatchを通じてストアに送られる．
dispatch(setName("Bob"));
- Reducer が新しい状態を計算する
：ストアは Reducer を呼び出し，アクションに応じて新しい状態を計算する - ストアの状態が更新される
：新しい状態がストアに保存される - UIがレンダリングされる
イメージ
Redux Toolkitを用いた状態管理の例
- ストアの設定
import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./userSlice";
// ストアの作成
const store = configureStore({
reducer: {
user: userReducer, // reducerの設定
},
});
export default store;
- スライスの作成
import { createSlice } from "@reduxjs/toolkit";
const userSlice = createSlice({
name: "user", // スライス名
initialState: { name: "Alice" }, // stateの初期値
// stateの更新処理
reducers: {
setName: (state, action) => {
state.name = action.payload;
},
},
});
// action creater を作成してエクスポート
export const { setName } = userSlice.actions;
export default userSlice.reducer;
- Reactコンポーネントで使用
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { setName } from "./userSlice";
const UserComponent = () => {
// useSelectorで現在のstateを取得
// state.userのuserはreducerで定義したオブジェクトのuserプロパティのこと
const name = useSelector((state) => state.user.name);
// 以下のようにactionをdispatchでストアに送る
const dispatch = useDispatch();
return (
<div>
<p>User Name: {name}</p>
<button onClick={() => dispatch(setName("Bob"))}>
Change Name
</button>
</div>
);
};
export default UserComponent;
🔗 参考文献
🔮 最後に
Redux / Redux-Toolkitについてまとめてみました！誰かの参考になったら幸いです．最後まで読んでいただきありがとうございました．それでは！