神速でRedux Toolkitをキャッチアップする6の手順

この記事の対象者

・Reactは触ったことあるが、Redux Toolkitを触ったことがない人
・さらっとRedux Toolkitの使い方を復習したい人

この記事でやらないこと

・ディレクトリ構成(Re-Ducksパターンのような)
・Reduxのメリットの紹介

環境

OS: Mac OS
ProductName:    macOS
ProductVersion: 12.5.1
BuildVersion:   21G83
node : v16.14.0
npm: 8.3.1
zsh: 5.8.1 (x86_64-apple-darwin21.0)

手順

①Reactプロジェクトを用意する
②Storeの作成をする
③Providerコンポーネントの設定
~~~~~~Redux Toolkitを扱う「前準備」はここまで~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~ここまでは参画した案件が新規開発でなければ、デフォルトで設定されているはず~~~~~~~~~
④sliceファイルの作成
⑤useSelectorで値を取得することができる
⑥useDispatchで値を更新

①プロジェクトを用意する

①-1. Reactプロジェクトを作成する

npx create-react-app redux-toolkit-practice

①-2. Reduxとredux toolkitパッケージのインストール

npm install @reduxjs/toolkit react-redux

②storeの作成をする

②-1.configureStoreを@reduxjs/toolkitからimportする

store.js

import { configureStore } from '@reduxjs/toolkit'; // ②-1

export const store = configureStore({
  reducer: {}, // reducerは後ほど設定します
});

store・・・状態を保存する場所

③Providerコンポーネントの設定

③-1. ルートファイルのコンポーネントをProviderで囲みます。

③-2. propsでstoreに②で作成したstoreをimportして渡してあげます。

作成したstoreにすべてのコンポーネントがアクセスできるようになる

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { store } from "./redux/store";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}> // ③-1, ③-2
      <App />
    </Provider>
  </React.StrictMode>
);

次に
・どうやって値を取得するのか
・どうやって値を更新するのか
について見ていきます。

④sliceファイルの作成

・sliceファイルに値の更新を行う関数を設置する

④-1. createSliceを@reduxjs/toolkitからimportする
④-2. nameを設定する
④-3. initialStateを設定する
・initialStateは初期値のこと
④-4. reducersを設定する
・reducersとは更新する関数のこと

Action Createrとは・・・
storeに変化を加えるための関数。
Redux Toolkitではreducersの中で定義した関数は自動で同名のAction Createrを生成する。

couterSlice.js

import { createSlice } from '@reduxjs/toolkit'; // ④-1

export const counterSlice = createSlice({
  name: 'counter', // ④-2
  initialState: {
    count: 0, // ④-3
  },
  reducers: { // ④-4
    increase: (state) => {
      state.count += 1;
    },
    decrease: (state) => {
      state.count -= 1;
    },
  },
});

// Action Createrをexportする
export const { increase, decrease } = counterSlice.actions;
// 定義したcounterSliceのreducerをexportする
export default counterSlice.reducer;

④-5. sliceファイルをstoreのreducerに設定する

store.js

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer, // ④-5
  },
});

上記によって、sliceで設定したstateをすべてのコンポーネントからアクセスすることができるようになる。

⑤useSelectorで値を取得

※仮にApp.jsでstateを操作する。

⑤-1. useSelectorをreact-reduxからimportする
⑤-2. useSelectorを使用して値を取得

  const count = useSelector((state) => state.counter.count);

・stateで④-5で定義したstoreのreducerにアクセス
・counterはstore.jsで設定したオブジェクトのプロパティcounterにアクセス
・countはcounterSlice.jsのinitialStateで設定したcountにアクセス

App.js

import './App.css';
import { useSelector } from 'react-redux';

function App() {
  const count = useSelector((state) => state.counter.count);
  return (
    <div className="App">
      <h1>Count: {count}</h1>
    </div>
  );
}

export default App;

⑥useDispatchで値を更新

※仮にApp.jsでstateを操作する。 ⑥-1. useDispatchをreact-reduxからimportする ⑥-2. ④-4でexportしたdecrease, increaseをimportする ⑥-3. dispatchで⑥-2でimportした関数を囲う

import './App.css';
import { useSelector, useDispatch } from 'react-redux'; // ⑥-1
import { decrease, increase } from './redux/counterSlice'; // ⑥-2

function App() {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increase())}>Up</button> // ⑥-3
      <button onClick={() => dispatch(decrease())}>Down</button> // ⑥-3
    </div>
  );
}

export default App;

これでRedux Toolkitでstateの取得、更新ができたと思います。

参考

以下記事を参考にさせていただきました。