Redux Toolkit クイックスタート

学習内容

• React-Redux を使用した Redux Toolkit の設定と使用方法

前提条件

• ES6 の構文と機能 の知識
• React の用語に関する知識：JSX、状態、関数コンポーネント、プロップス、および フック
• Redux の用語と概念 の理解

はじめに

Redux Toolkit クイックスタートチュートリアルへようこそ！ **このチュートリアルでは、Redux Toolkit を簡単に紹介し、その正しい使用方法を学びます。**

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

このページでは、Redux Toolkit を使用した Redux アプリケーションの設定方法と、使用する主な API のみに焦点を当てています。Redux とは何で、どのように機能するのか、Redux Toolkit の使用方法の完全な例については、"チュートリアルインデックス" ページにリンクされているチュートリアルを参照してください。

このチュートリアルでは、React で Redux Toolkit を使用していることを前提としていますが、他の UI レイヤーでも使用できます。例は、すべてのアプリケーションコードが `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 の `` を配置することで、React コンポーネントで使用できるようにすることができます。作成した Redux ストアをインポートし、`` を `` の周りに配置し、ストアをプロップとして渡します。

index.js

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

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

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

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

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

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
      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 の追加

次に、カウンタースライスから reducer 関数をインポートし、ストアに追加する必要があります。`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` ファイルを作成し、そのコンポーネントを `App.js` にインポートして `` 内にレンダリングします。

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>
  )
}

これで、「増加」と「減少」ボタンをクリックするたびに

• 対応する Redux アクションがストアにディスパッチされます。
• カウンタースライス reducer はアクションを検出し、その状態を更新します。
• そして `` コンポーネントはストアから新しい状態の値を検出し、新しいデータを使用して自身を再レンダリングします。

学習内容

これは、React で Redux Toolkit を設定および使用する方法の概要です。詳細を要約すると

要約

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

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

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

次のステップ

**完全な「Redux Essentials」チュートリアル** を参照することをお勧めします。これには、Redux Toolkit に含まれるすべての主要な要素、それらが解決する問題、およびそれらを使用して現実世界のアプリケーションを構築する方法が説明されています。

「Redux 基礎」チュートリアル を読むこともできます。これにより、Redux の動作、Redux Toolkit の機能、およびその正しい使用方法を完全に理解できます。