この記事では、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の関数です。aとbの引数には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では、useSelectorとuseDispatchという2つの主要なHooksが提供されています。
useSelector: ストアの状態にアクセスするためのHookuseDispatch: アクションをディスパッチ（送出）するための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このコードは、useSelectorとuseDispatchを使ってReduxの状態を操作するReactのコンポーネントです。
7. Redux Hooksの具体的な使い方とベストプラクティス
Redux Hooksの具体的な使い方について詳しく解説します。
先ほど紹介したuseSelectorとuseDispatchは、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の開発を進めていくことができるでしょう。
