【初心者必見】React-Reduxの使い方をチュートリアルで学ぶ

みなさん、こんにちは！

今日は初心者向けにReact-Reduxのチュートリアルをご紹介します。
ハンズオン形式で進めていくので、一緒に手を動かしながら学んでいきましょう！

では、さっそく始めていきましょう！

React-Reduxとは 🤔

まずは、React-Reduxについて簡単に解説します。

React-Reduxは、Reactアプリケーションで状態管理を行うためのライブラリです。
Reduxを使用することで、アプリケーション全体でデータを一元管理でき、コンポーネント間でのデータのやり取りがスムーズになります。

GitHub - reduxjs/react-redux: Official React bindings for Redux

Official React bindings for Redux. Contribute to reduxjs/react-redux development by creating an account on GitHub.

github.com

環境構築 🛠️

それでは、まずは環境構築を行いましょう。

以下のコマンドで、Reactアプリケーションを作成します。

npx create-react-app react-redux-tutorial

次に、必要なパッケージをインストールしましょう。

cd react-redux-tutorial
npm install redux react-redux

これで環境構築が完了しました！

Reduxの基本概念 📘

それでは、Reduxの基本概念について詳しく解説します。

Reduxでは、以下の3つの要素があります。

Store

アプリケーションの状態を管理する場所です。

Storeはアプリケーション内で唯一のものでアプリケーションの状態を持っています。
また、StoreはReducerを使って状態を更新します。

Reducer

アクションに応じて状態を更新する純粋関数です。

Reducerは現在の状態とアクションを引数として受け取り、新しい状態を返します。
Reducerは副作用を持たず、同じ入力に対して常に同じ出力を返す必要があります。

Action

何らかのイベントを表すオブジェクトで type と payload を持ちます。

type はActionの種類を示す文字列で、payload はアクションに関連するデータを持ちます。
Actionはアプリケーションで何が起こったかを示す情報を持っています。

それでは、これらの概念を使って簡単なカウンターアプリケーションを作成していきましょう！

Reducerの作成 📝

まずは、Reducerを作成します。srcフォルダ内に reducers フォルダを作成し、その中に counter.js ファイルを作成しましょう。

const initialState = {
  count: 0
}

const counter = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 }
    case 'DECREMENT':
      return { ...state, count: state.count - 1 }
    default:
      return state
  }
}

export default counter

上記のコードでは、カウンターの初期状態と INCREMENT 、DECREMENT の2つのアクションに対する状態の更新を定義しています。

INCREMENT アクションが発生した場合はカウントを1増やし、DECREMENT アクションが発生した場合はカウントを1減らすように状態を更新しています。

Storeの作成 🏪

次はStoreを作成します。
srcフォルダ内に store.js ファイルを作成しましょう。

import { createStore } from 'redux'
import counter from './reducers/counter'

const store = createStore(counter)

export default store

上記のコードでは、先ほど作成したcounter Reducerを使って、Storeを作成しています。

React-Reduxの連携 🔄

それでは、ReactアプリケーションとReduxを連携させましょう！

まずは、srcフォルダ内の index.js ファイルを編集します。

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

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

上記のコードでは、react-reduxのProviderコンポーネントを使って、Reactアプリケーション全体でStoreを使えるようにしています。

カウンターアプリケーションの作成 🎨

最後に、カウンターアプリケーションを作成しましょう。

srcフォルダ内の App.js ファイルを以下のように編集します。

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'

function App() {
  const count = useSelector((state) => state.count)
  const dispatch = useDispatch()

  const increment = () => dispatch({ type: 'INCREMENT' })
  const decrement = () => dispatch({ type: 'DECREMENT' })

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  )
}

export default App