React + Reduxを基本からまとめてみた【9】【Redux Toolkit ①】

Redux Toolkitとは

Redux-Toolkitは、Reduxをより簡単に利用できるようにしたライブラリのこと。

Reduxのみの開発では、以下のような問題点があった。

• Redux Storeを構成することが複雑すぎる
• 大規模のアプリケーションを構築するにはたくさんの追加パッケージをインストールする必要がある
• Reduxを利用するためには定型文的なコードを大量に記述する必要がある

Redux Toolkitを利用することで定型分的なコード量を減らせ、開発者が陥りがちな問題を避けるためにこれまで蓄積されたベストプラクティスが反映されているためReduxのコードを効率よく記述できる。

インストール

$ npm install --save @reduxjs/toolkit react-redux

package.jsonを確認

package.json

{
  "name": "piita-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {

    "@reduxjs/toolkit": "^1.6.1",

    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1",
    "@types/node": "^12.20.16",
    "@types/react": "^16.14.11",
    "@types/react-dom": "^16.9.14",
    "@types/react-redux": "^7.1.18",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",

    "react-redux": "^7.2.4",

    "react-scripts": "4.0.3",
    "typescript": "^4.1.6"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Redux Toolkitの設定

Storeの作成

Reduxではすべてのコンポーネントからアクセス可能なstoreと呼ばれる場所を作成する必要がある。srcフォルダにreduxフォルダを作成しその中にstore.jsファイルを作成する。

src/redux/store.js

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

Providerコンポーネントの設定

store.jsファイル作成後、作成したstoreにすべてのコンポーネントからアクセスできるようにindex.jsファイルを開いてAppコンポーネントをProviderで包む。Providerはreact-reduxからimportする。さらに作成したstoreをimportしてstoreをpropsとしてProviderコンポーネントに渡す。

index.js

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

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Sliceファイルの作成

カウンターの変数count、countの初期値やcountの値を更新する関数をRedux ToolkitではSliceファイルに作成する。Sliceファイルは管理したいデータを目的別/機能別に分けることができるのでここではカウンターの変数countに関する設定をcounterSlice.jsファイルに全て設定する。もしユーザ情報をRedux Toolkitで管理したい場合は、userSlice.jsといった名前の別ファイルを作成しユーザ情報の初期値や更新に利用する関数を記述する。Sliceでデータを目的別にわけることでデータ管理を混乱をさけ、効率的に管理することができる。Sliceファイルの中で初期値、reducer、Action Creatorを設定することができるためそれぞれの処理を複数のファイルに分けて記述する必要がない。

reduxフォルダの中にcounterSlice.jsファイルを作成し、Redux ToolkitからcrateSliceをimportする。creteSliceの引数にはname, initialState, reducersプロパティを持つオブジェクトを指定する。

nameにはSliceを識別するための名前を設定します。initialStateには共有するデータ(state)の初期値を設定し、reducersの中にはstateを更新するための関数を設定する。

下記のコードではsliceの名前をcounter、countの初期値を0に設定し、reducersの中で関数increaseとdecreaseのreducerを定義している。increaseでは関数の引数にstateが入りcountの値を1増やす処理を行う。decreaseでは現在のcountの値を1減らす処理を行う。

redux/counterSlice.js

import { createSlice } from '@reduxjs/toolkit';

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

参考サイト

[Redux入門者向け初めてのRedux ToolkitとRedux Thunkの非同期処理]
(https://reffect.co.jp/react/redux-toolkit)