メインコンテンツへスキップ

React Redux クイックスタート

学習内容
  • Redux Toolkit と React Redux をセットアップして使用する方法
前提条件

はじめに​

React Redux クイックスタートチュートリアルへようこそ！ このチュートリアルでは、React Redux を簡単に紹介し、正しく使い始める方法を教えます。

このチュートリアルの読み方​

このページでは、Redux Toolkit と主な使用 API を使用して Redux アプリケーションをセットアップする方法に焦点を当てます。Redux とは何か、どのように機能するのか、Redux Toolkit の完全な使用例については、Redux コアドキュメントのチュートリアルを参照してください。

このチュートリアルでは、Redux の標準的な使用パターンとして、Redux Toolkit と React Redux を一緒に使用していることを前提としています。例は、すべてのアプリケーションコードが src にある典型的な Create-React-App フォルダ構造に基づいていますが、パターンは、使用しているプロジェクトやフォルダのセットアップに合わせることができます。

Create-React-App 用の Redux+JS テンプレートには、この同じプロジェクト設定がすでに構成されています。

使用法の概要​

Redux Toolkit と React Redux のインストール​

Redux Toolkit パッケージと React Redux パッケージをプロジェクトに追加します。

npm install @reduxjs/toolkit react-redux

Redux ストアの作成​

src/app/store.js という名前のファイルを作成します。Redux Toolkit から configureStore API をインポートします。まず、空の Redux ストアを作成し、それをエクスポートします。

app/store.js
import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {},
})

これにより、Redux ストアが作成され、開発中にストアを検査できるように Redux DevTools 拡張機能も自動的に構成されます。

React に Redux ストアを提供する​

ストアが作成されたら、src/index.js で React Redux <Provider> をアプリケーションの周りに配置することで、React コンポーネントでストアを使用できるようにします。作成した Redux ストアをインポートし、<App> の周りに <Provider> を配置して、ストアを prop として渡します。

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

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <Provider store={store}>
    <App />
  </Provider>,
)

Redux ステートスライスの作成​

src/features/counter/counterSlice.js という名前の新しいファイルを追加します。そのファイルで、Redux Toolkit から createSlice API をインポートします。

スライスを作成するには、スライスを識別するための文字列名、初期ステート値、およびステートを更新する方法を定義するための 1 つ以上のリデューサー関数が必要です。スライスを作成したら、生成された Redux アクションクリエーターとスライス全体のリデューサー関数をエクスポートできます。

Redux では、データのコピーを作成してコピーを更新することにより、すべてのステート更新をイミュータブルに記述する必要があります。ただし、Redux Toolkit の createSlice および createReducer API は、内部で Immer を使用して、正しいイミュータブルな更新になる「ミューテーション」更新ロジックを記述できるようにします。

features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes.
      // Also, no return statement is required from these functions.
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

ストアにスライスリデューサーを追加する​

次に、カウンタースライスからリデューサー関数をインポートし、それをストアに追加する必要があります。reducer パラメーター内にフィールドを定義することで、そのステートへのすべての更新を処理するためにこのスライスリデューサー関数を使用するようにストアに指示します。

app/store.js
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
})

React コンポーネントで Redux ステートとアクションを使用する​

これで、React Redux フックを使用して、React コンポーネントが Redux ストアと対話できるようになりました。useSelector を使用してストアからデータを読み取り、useDispatch を使用してアクションをディスパッチできます。src/features/counter/Counter.js ファイルの中に <Counter> コンポーネントを作成し、そのコンポーネントを App.js にインポートして <App> の内部にレンダリングします。

features/counter/Counter.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import styles from './Counter.module.css'

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

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

これで、「Increment」ボタンと「Decrement」ボタンをクリックするたびに、

  • 対応する Redux アクションがストアにディスパッチされます。
  • カウンタースライスリデューサーはアクションを確認し、そのステートを更新します。
  • <Counter> コンポーネントはストアから新しいステート値を確認し、新しいデータで自身を再レンダリングします。

学習内容​

これは、Redux Toolkit を React でセットアップして使用する方法の概要でした。詳細をまとめます。

まとめ
  • configureStore で Redux ストアを作成します。
    • configureStore は、名前付き引数として reducer 関数を受け入れます。
    • configureStore は、優れたデフォルト設定でストアを自動的にセットアップします。
  • React アプリケーションコンポーネントに Redux ストアを提供します。
    • React Redux <Provider> コンポーネントを <App /> の周りに配置します。
    • Redux ストアを <Provider store={store}> として渡します。
  • createSlice で Redux 「スライス」リデューサーを作成します。
    • 文字列名、初期ステート、および名前付きリデューサー関数を指定して createSlice を呼び出します。
    • リデューサー関数は、Immer を使用してステートを「ミューテート」できます。
    • 生成されたスライスリデューサーとアクションクリエーターをエクスポートします。
  • React コンポーネントで React Redux useSelector/useDispatch フックを使用します。
    • useSelector フックを使用してストアからデータを読み取ります。
    • useDispatch フックを使用して dispatch 関数を取得し、必要に応じてアクションをディスパッチします。

完全なカウンターアプリの例​

実行中の CodeSandbox としての完全なカウンターアプリケーションを次に示します。

次のステップ​

Redux コアドキュメントの「Redux Essentials」と「Redux Fundamentals」チュートリアルを参照することをお勧めします。これにより、Redux がどのように機能するか、Redux Toolkit と React Redux が何をするのか、およびそれらを正しく使用する方法を完全に理解できます。