【React】カウントアップ機能を作って”Redux”に入門する

2023.02.19

Reactでアプリケーションの状態管理を行うにはReduxを使うとよいという噂を聞き、Reduxに入門してみることにしました。

本記事では、Reduxを使用するメリットから、使用方法までわかりやすく解説しています。

目次
  1. Reduxとは何か
  2. Reduxを使ってカウントアップ機能を作る
  3. まとめ

Reduxとは何か

Reduxは、JavaScriptの状態管理ライブラリです。

Reactのコンポーネントが保持する状態を外部に分離することで、アプリケーションの状態管理を簡素化することができます。

ReactでReduxを扱う場合は、Reduxより提供されている公式ツールキット使用することにより、簡潔にReduxコードを記述できるようになっています。

メリット・デメリットを基にもう少し詳しく見てみましょう！

Reduxを使用するメリット

代表的なメリットは以下の3点です。

状態の管理が容易

Reduxを使用することで、アプリケーション全体の状態を一元管理できるため、状態の変更を追跡しやすくなります。

また、状態の変更を予測しやすくなり、アプリケーションのバグを特定しやすくなるため、メンテナンスが容易になります。

コンポーネントの再利用性

Reduxを使用することで、状態を外部から注入することができるため、コンポーネントの再利用性が高くなります。

コンポーネントは状態を持たないため、同じコンポーネントを複数の場所で使用することができます。

非同期処理の簡素化

Reduxを使用することで、非同期処理を簡単に扱うことができます。

Reduxは、ミドルウェアを使用することで、非同期処理を簡素化するためのサポートを提供しています。たとえば、Redux-Thunkを使用することで、非同期処理をシンプルに扱うことができます。

Reduxを使用するデメリット

代表的なデメリットは以下の3点です。

冗長なコード

Reduxを使用することで、アプリケーション内に冗長なコードが生じることがあります。

アプリケーション内の状態の変更を追跡しやすくするため、ActionやReducerなどの追加のコードが必要になります。

過剰な使用

Reduxは、小規模なアプリケーションでは不必要な場合があります。

また、Reduxを使用することで、アプリケーションの複雑性が増し、余分なオーバーヘッドが生じる場合があるため、必要な場合にのみ使用することが重要です。

学習コスト

Reduxは、Reactとは異なるライブラリであり、開発者がReduxについて学習する必要があります。

Reduxを使ってカウントアップ機能を作る

上記より、Reduxとは何かをなんとなく理解いただけたと思うので、実際にカウントアップ機能を作りながら、具体的なReduxの使い方を見ていきましょう！

作成するのはこちらです。

+1、-1と、指定した数だけ追加することができる機能です。

作成手順

  1. Reactプロジェクト立ち上げ
  2. 必要ライブラリのinstall
  3. sliceの作成。slice とは、”state”,”reducer”,”action creator”の 3 つをまとめたもののこと
  4. storeの作成
  5. Providerの設定
  6. Viewの作成

1. Reactプロジェクト立ち上げ

以下コマンドで、npm を使ってReactプロジェクトを立ち上げます。

% npx create-react-app react-reducer

2. 必要ライブラリのinstall

ReactでReduxを使うのに必要となる2つのライブラリをinstallします。

% npm install @reduxjs/toolkit

% npm install react-redux

3. sliceの作成

srcフォルダにreduxという名前でフォルダを作り、counterSlice.jsという名前でsliceファイルを作成します。

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

const counterSlice = createSlice({
  name: "counter",
  initialState: {
    value: 0,
  },
  reducers: {
    // ここにstateの更新関数を記述する。このreducerの作成により、action creatorも自動で作成される。
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload; // このpayloadはinputで受け取る値が変わるような場合に使用するもの
    },
  },
});

// action creatorをexportする
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

このファイルのポイントは以下です。

  • toolkitの中の、creageSliceというhooksを使用します。
  • counterという名前で初期値0とし、3つの更新関数を作成します。
  • 作成した更新関数は、プロジェクト内どこでも使用できるaction creatorとしてexportします。

4. storeの作成

3で作成したsliceをcounterReducerとしてimport してstoreのreducerに定義します。

import { configureStore } from "@reduxjs/toolkit"; // これを使うことで簡単にstoreを作ることができる
import counterReducer from "./counterSlice";

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

5. Providerの設定

4で作成したstoreをプロジェクト全体に使用するため、AppコンポーネントをRpoviderで囲み、storeを渡します。

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

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

Viewの作成

import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import "./App.css";
import { decrement, increment, incrementByAmount } from "./redux/counterSlice";

function App() {
  const count = useSelector((state) => state.counter.value);
  // useSelectorは、アクセスするためのreduxのhooks。ここのcounterは、store.jsのcounter
  const dispatch = useDispatch(); // actionをstoreに伝えるためのhooks

  const [incrementAmount, setIncrementAmount] = useState(2);
  return (
    <div className="App">
      <h1>カウント数: {count}</h1>
      <div>
        <button onClick={() => dispatch(increment())}>+1</button>
        <button onClick={() => dispatch(decrement())}>-1</button>
      </div>
      <div>
        <label style={{ display: "block" }}>
          1カウントで追加したい数を入力してください
        </label>
        <input
          onChange={(e) => setIncrementAmount(e.target.value)}
          value={incrementAmount}
        />
        <button
          onClick={() => dispatch(incrementByAmount(Number(incrementAmount)))}
        >
          追加
        </button>
      </div>
    </div>
  );
}

export default App;

Viewでのポイントは以下です。

  • react-reduxのuseSelectorを使って、storeで定義したcouterを使用できるようにします。
  • react-reduxのuseDispatchを使って、sliceで作成した更新関数のactionを利用できるようにします。

まとめ

Reduxの最大の特徴は、状態管理の簡素化ができることです。

カウントアップ機能の作成を通して、状態の更新をcounterSlice.jsという一つのファイルのみで管理し一元化ができることを理解いただけたかと思います。

以上、ご覧いただきありがとうございました。

コメント