Reactのライブラリ「Redux」の使い方 | Redux ToolkitとHooksとの違いは?

当サイトでは一部リンクに広告が含まれています
Reactアイコン

この記事では、ReactとReduxの基本的な使い方から、Redux ToolkitやHooksの活用方法、さらにTypeScriptとの組み合わせまで、詳しく解説します。

目次

1. ReactとReduxとは:基本理解のための入門

まず、Reactとは、Facebookが開発したユーザインターフェースを構築するためのJavaScriptライブラリです。

具体的なコードを見てみましょう。

function HelloMessage({ name }) {
  return <div>こんにちは、{name}さん</div>;
}

ReactDOM.render(
  <HelloMessage name="山田" />,
  document.getElementById('hello-example')
);

このコードは、”こんにちは、山田さん”というメッセージを画面に表示する簡単なReactのコンポーネントです。

一方、Reduxとは、JavaScriptアプリケーションの状態管理を行うためのライブラリです。

状態管理とは、アプリケーションがどのような状態にあるのかを一元管理し、その状態に基づいてアプリケーションの動作を制御することを指します。

import { createStore } from 'redux'

// 状態の初期値
const initialState = { value: 0 }

// レデューサー
function counter(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 }
    default:
      return state
  }
}

// ストアを作成
let store = createStore(counter)

console.log(store.getState())
// { value: 0 }

store.dispatch({ type: 'INCREMENT' })

console.log(store.getState())
// { value: 1 }

このコードは、Reduxを使って値をインクリメント(増やす)動作を管理する簡単な例です。

2. Reduxの役割:なぜReactにReduxが必要なのか

それでは、なぜReactのアプリケーションにReduxが必要なのでしょうか。

一言で言えば、ReactとReduxの組み合わせにより、大規模なアプリケーションでも状態管理を効率的に行うことが可能になります。

Reactはコンポーネントベースのライブラリで、それぞれのコンポーネントが独立した状態を持つことができます。しかし、これらの状態を一元的に管理し、複数のコンポーネント間で共有するためには、何らかの仕組みが必要です。その仕組みを提供してくれるのがReduxです。

3. TypeScriptとRedux:強力な組み合わせ

次に、TypeScriptについて解説します。TypeScriptはMicrosoftが開発したJavaScriptのスーパーセットで、JavaScriptに型を追加した言語です。

それでは具体的なコードを見てみましょう。

function add(a: number, b: number): number {
  return a + b;
}

let sum = add(1, 2);
console.log(sum);  // 3

このコードは、2つの数値を加算する簡単なTypeScriptの関数です。abの引数にはnumber型が指定されており、この関数が数値を返すことも明示されています。JavaScriptには存在しないこの型情報の追加により、コードの安全性と可読性が向上します。

また、ReduxはTypeScriptと非常に相性が良いです。Reduxのアクションのタイプや状態の構造を型として定義することで、コードの安全性を一層高めることができます。

4. Redux Toolkitを使うメリット:開発を加速するツール

Redux Toolkitは、Reduxの開発を簡単にするための公式ツールキットです。Reduxのボイラープレート(定型的なコード)を大幅に減らし、開発効率を向上させます。

具体的には、アクションの生成、不変性のハンドリング、ミドルウェアの設定などを簡単に行うことができます。

それでは、Redux Toolkitを使って上記のカウンターの例を書き直してみましょう。

import { createSlice, configureStore } from '@reduxjs/toolkit'

// スライスを作成
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1 }
  }
})

// ストアを作成
let store = configureStore({
  reducer: counterSlice.reducer
})

console.log(store.getState())
// { value: 0 }

store.dispatch(counterSlice.actions.increment())

console.log(store.getState())
// { value: 1 }

このように、Redux Toolkitを使用すると、より少ないコードで同じ機能を実現できます。

5. Redux Toolkitの導入と基本的な使い方

それでは、Redux Toolkitの具体的な導入方法と基本的な使い方について説明します。

まず、Redux Toolkitはnpmを使って導入することができます。

npm install @reduxjs/toolkit

これで、Redux Toolkitをプロジェクトに追加することが

できます。

次に、Redux Toolkitを使って、状態管理のためのスライスを作成します。スライスとは、Reduxの状態とそれを操作するためのアクションやレデューサーをまとめたものです。

import { createSlice } from '@reduxjs/toolkit'

// スライスの初期状態
const initialState = { value: 0 }

// スライスを作成
const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: state => { state.value += 1 },
    decrement: state => { state.value -= 1 }
  }
})

export const { increment, decrement } = counterSlice.actions

export default counterSlice.reducer

このコードは、カウンターの値を増やすアクションと減らすアクションを持つスライスを作成しています。

そして、このスライスを使用して、Reduxのストアを作成します。

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

// ストアを作成
const store = configureStore({
  reducer: {
    counter: counterReducer
  }
})

export default store

これで、Redux Toolkitを使ってReduxのストアを作成することができます。ストアには、上で作成したカウンターのスライスが含まれています。

6. ReduxとHooks:新たなReact開発のスタンダード

Reduxと一緒に使うと非常に便利なものの一つがReact Hooksです。HooksはReact 16.8から導入された新機能で、クラスコンポーネントを使わずに状態やライフサイクルを扱えるようになりました。

Reduxでは、useSelectoruseDispatchという2つの主要なHooksが提供されています。

  • useSelector: ストアの状態にアクセスするためのHook
  • useDispatch: アクションをディスパッチ(送出)するためのHook

それでは具体的なコードを見てみましょう。

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './counterSlice'

function Counter() {
  const count = useSelector(state => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <div>値: {count}</div>
      <button onClick={() => dispatch(increment())}>増加</button>
      <button onClick={() => dispatch(decrement())}>減少</button>
    </div>
  )
}

export default Counter

このコードは、useSelectoruseDispatchを使ってReduxの状態を操作するReactのコンポーネントです。

7. Redux Hooksの具体的な使い方とベストプラクティス

Redux Hooksの具体的な使い方について詳しく解説します。

先ほど紹介したuseSelectoruseDispatchは、Reduxの状態とアクションをReactのコンポーネントと結びつけるための基本的なHooksです。

それでは、これらのHooksを使って、ユーザーがフォームに入力したテキストを管理する簡単な例を見てみましょう。

まず、テキストを管理するためのスライスを作成します。

import { createSlice } from '@reduxjs/toolkit'

// スライスの初期状態
const initialState = { text: '' }

// スライスを作成
const textSlice = createSlice({
  name: 'text',
  initialState,
  reducers: {
    setText: (state, action) => { state.text = action.payload }
  }
})

export const { setText } = textSlice.actions

export default textSlice.reducer

このスライスは、setTextというアクションを持っており、このアクションをディスパッチすると、状態のtextの値が更新されます。

次に、このスライスを使用してテキストを表示し、更新するコンポーネントを作成します。

import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { setText } from './textSlice'

function TextForm() {
  const text = useSelector(state => state.text.text)
  const dispatch = useDispatch()

  const [input, setInput] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    dispatch(setText(input))
  }

  return (
    <div>
      <div>テキスト: {text}</div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={input}
          onChange={e => setInput(e.target.value)}
        />
        <button type="submit">送信</button>
      </form>
    </div>
  )
}

export default TextForm

このコードは、ユーザーが入力したテキストを表示し、新たなテキストを入力するためのフォームを提供するReactのコンポーネントです。フォームが送信されると、入力されたテキストがReduxの状態に保存されます。

これらの具体的なコード例を通じて、ReactとRedux、そしてHooksの組み合わせによる強力な状態管理の

方法を理解していただければ幸いです。初心者の方々もこれらの知識を活かして、より効率的で柔軟なReactの開発を進めていくことができるでしょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

フルスタックWebエンジニアであり、プログラミングスクール講師でもあります。
プログラミングスクールのカリキュラム執筆にも携わっており、プログラミング教材に精通しています。
Rails / React / Next.js / Vue.js / AWS が得意技術。

目次