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

<h2>この記事の対象者</h2>
・Reactは触ったことあるが、Redux Toolkitを触ったことがない人<br/>
・さらっとRedux Toolkitの使い方を復習したい人

<h2>この記事でやらないこと</h2>
・ディレクトリ構成(Re-Ducksパターンのような)<br/>
・Reduxのメリットの紹介

<h2>環境</h2>

```
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)
```

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


<h3>①プロジェクトを用意する</h3>
①-1. Reactプロジェクトを作成する

```
npx create-react-app redux-toolkit-practice
```
①-2. Reduxとredux toolkitパッケージのインストール

```
npm install @reduxjs/toolkit react-redux
```

<h3>②storeの作成をする</h3>

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

```store.js
import { configureStore } from '@reduxjs/toolkit'; // ②-1

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

:::note info
store・・・状態を保存する場所
:::

<h3>③Providerコンポーネントの設定</h3>
③-1. ルートファイルのコンポーネントをProviderで囲みます。<br/><br/>
③-2. propsでstoreに②で作成したstoreをimportして渡してあげます。

:::note info
作成した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>
);
```

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

<h3>④sliceファイルの作成</h3>

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

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

::: note
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をすべてのコンポーネントからアクセスすることができるようになる。

<h3>⑤useSelectorで値を取得</h3>
※仮にApp.jsでstateを操作する。<br/><br/>
⑤-1. useSelectorをreact-reduxからimportする<br/>
⑤-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;
```

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

```App/js
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の取得、更新ができたと思います。
<h2>参考</h2>
以下記事を参考にさせていただきました。


https://reffect.co.jp/react/redux-toolkit#Redux_Toolkit