Redux Toolkit って、どんな機能があるのかな？
今回は、React.js の 状態管理 の中でも代表的な Redux Toolkit について、基本的な考え方から実際の使い方、実務でよく使われるユースケースまでをわかりやすく解説します。
Redux Toolkit とは？
Redux Toolkit とは、React.js アプリの中で ログインしているユーザー情報 や、アプリ全体で共有したい設定情報 など、複数の画面やコンポーネントから使われる状態（データ）を、1か所にまとめて管理するための仕組み です。
なぜ Redux Toolkit が必要なの？
React.js の useState は便利な仕組みですが、アプリが大きくなると 同じ状態を複数のコンポーネントで使ったり、props を何階層にも渡したり と管理が難しくなってしまいます。
こうした問題を解決するために、状態をアプリ全体で共有・管理できる仕組み を提供するのが Redux Toolkit です。
なお、Redux Toolkit は従来の Redux をより簡単に使えるようにした 公式ツールキット です。
従来の Redux は設定やコード量が多く扱いづらいこともありましたが、Redux Toolkit ではシンプルに書けるよう改善され、簡単に使えるようになっています。
Redux Toolkit で管理する状態（データ）
Redux Toolkit は、主に アプリ全体で共有したい状態 を管理するために使用されます。
そのため、コンポーネント単体で完結する状態 ではなく、複数の画面やコンポーネントから参照・更新される状態が対象 となります。
Redux Toolkit で 状態（データ）を管理するかは、アプリ全体で共有する必要があるかどうかで判断します。
具体的には、次のような 状態（データ）が該当します。
- ログインしているユーザー情報
- モーダルやダイアログの表示状態
- 選択中のタブやフィルター
- アプリ全体で共通の設定情報
Redux Toolkit のインストールと基本的な使い方
それでは、ここから実際に Redux Toolkit を インストール したり、コンポーネントで利用する基本的な流れを見ていきましょう。
Redux Toolkit と React-Redux のインストール
Redux Toolkit および React-Redux を インストール します
npm install @reduxjs/toolkit react-reduxユースケース①: カウンター
Slice の作成
カウンター の 状態（データ）の初期値 や 処理内容 を登録する
// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';
export const counterSlice = createSlice({
name: 'counter',
initialState: {
count: 0, // 初期値
},
reducers: {
// +1 ずつカウントアップ
increment: (state) => {
state.count += 1;
},
// -1 ずつカウントダウン
decrement: (state) => {
state.count -= 1;
},
// input で指定した値でカウントアップ
incrementByInput: (state, action) => {
state.count += action.payload;
},
},
});
export const { increment, decrement, incrementByInput } = counterSlice.actions;
export default counterSlice.reducer;Store に Slice の登録
上記の Slice を呼び出せるように、Store に登録する
// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
export const store = configureStore({
reducer: {
counter: counterReducer,
},
});Provider の設定
上記の Store を アプリ上 で 状態管理 ができるように、Provider を設定する
// main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import { Provider } from 'react-redux';
import { store } from './store';
createRoot(document.getElementById('root')).render(
<StrictMode>
<Provider store={store}>
<App />
</Provider>
</StrictMode>,
);状態（データ）の取得・表示・更新
アプリ上 で、状態（データ）の取得・表示・更新 を確認する
// App.jsx
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { decrement, increment, incrementByInput } from './counterSlice';
export default function App() {
//useSelector でアクセス, useDipatch で更新
const count = useSelector((state) => state.counter.count);
const dispatch = useDispatch();
// input の値を更新 初期値: 3
const [incrementInput, setIncrementInput] = useState(3);
// +1 ずつカウントアップ
const countUp = () => dispatch(increment());
// -1 ずつカウントダウン
const countDown = () => dispatch(decrement());
// input で指定した値でカウントアップ
const countUpByInput = () =>
dispatch(incrementByInput(Number(incrementInput)));
return (
<>
<h2>ReduxToolkit Counter</h2>
<h1>Count: {count}</h1>
{/* +1 ずつカウントアップ */}
<button onClick={countUp}>＋</button>
{/* -1 ずつカウントダウン */}
<button onClick={countDown}>ー</button>
<br />
<div>
{/* input で指定した値でカウントアップ */}
<input
value={incrementInput}
onChange={(e) => setIncrementInput(e.target.value)}
/>
<button onClick={countUpByInput}>追加</button>
</div>
</>
);
}処理内容
- “+” ボタンで、+1 ずつカウントアップ される
- “–” ボタンで、-1 ずつカウントダウン される
- “追加” ボタンで、入力値の +3 ずつカウントアップ される
- 入力値を ”5” に変更後、”追加” ボタンで、入力値の +5 ずつカウントアップ される
ユースケース②: ログインのユーザー情報
Slice の作成
ユーザー の 状態（データ）の初期値 や 処理内容 を登録する
// userSlice.js
import { createSlice } from '@reduxjs/toolkit';
const userSlice = createSlice({
name: 'user',
initialState: { name: '', loggedIn: false },
reducers: {
login(state, action) {
state.name = action.payload;
state.loggedIn = true;
},
logout(state) {
state.name = '';
state.loggedIn = false;
},
},
});
export const { login, logout } = userSlice.actions;
export default userSlice.reducer;Store に Slice の登録・追加
上記の Slice を呼び出せるように、Store に登録する
// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
import userReducer from './userSlice'; // 追加
export const store = configureStore({
reducer: {
counter: counterReducer,
user: userReducer, // 追加
},
});Provider の設定 ※ 変更無し
上記の Store を アプリ上 で 状態管理 ができるように、Provider を設定する
// main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import { Provider } from 'react-redux';
import { store } from './store';
createRoot(document.getElementById('root')).render(
<StrictMode>
<Provider store={store}>
<App />
</Provider>
</StrictMode>,
);データの取得・表示・更新
アプリ上 で、状態（データ）の取得・表示・更新 を確認する
// App.js
import { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { login, logout } from './userSlice';
export default function App() {
// useSelector でアクセス, useDipatch で更新
const user = useSelector((state) => state.user);
const dispatch = useDispatch();
// input の値を更新 初期値: 山田 太郎
const [userName, setUserName] = useState('山田 太郎');
return (
<>
<h2>ReduxToolkit UserProfile</h2>
{user.loggedIn ? null : (
<input
type="text"
value={userName}
onChange={(e) => setUserName(e.target.value)}
/>
)}
{user.loggedIn ? (
<>
{/* ログイン状態で入力した名前とログアウトボタンを表示 */}
<p>こんにちは、{user.name} さん</p>
<button onClick={() => dispatch(logout())}>ログアウト</button>
</>
) : (
<>
{/* ログアウト状態で入力欄とログインボタンを表示 */}
<button onClick={() => dispatch(login(userName))}>ログイン</button>
</>
)}
</>
);
}
処理内容
- “ログイン” ボタンのクリックで、 ”こんにちは、山田 太郎さん” と ”ログアウト” ボタンが表示される
- “ログアウト” ボタンのクリックで、入力欄 と”ログイン” ボタンが表示される
- 入力欄 に ”テスト 花子”と入力後、”ログイン” ボタンのクリックで、 ”こんにちは、テスト 花子さん” と ”ログアウト” ボタンが表示される
まとめ
Redux Toolkit について、いかがでしたでしょうか？
Redux Toolkit は、React.js アプリで 複数の画面やコンポーネントから使用される状態（データ）を1か所にまとめて管理するための仕組み のことで、 ログイン中のユーザー情報 や、アプリ全体で共有したい設定情報 の管理などに向いています。
まずは基本的な使い方をしっかり押さえ、複数の小さな コンポーネント で試しながら、少しずつ Redux Toolkit に慣れていきましょう。
コメント