非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。エラーを見つけましたか？問題を報告 →

Redux Toolkit クイックスタート

学習内容

React-Redux と Redux Toolkit のセットアップと使用方法

前提知識

ES6構文と機能の理解
React用語の知識: JSX, State, 関数コンポーネント, Props, Hooks
Reduxの用語と概念の理解

はじめに

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

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

このページでは、Redux Toolkitを使ったReduxアプリケーションのセットアップ方法と主要APIの使用方法に焦点を当てます。Reduxとは何か、その仕組み、Redux Toolkitの完全な使用例については、「チュートリアルインデックス」ページのリンクを参照してください。

このチュートリアルではRedux ToolkitをReactと組み合わせて使用することを想定していますが、他のUIレイヤーでも使用可能です。例は典型的なCreate-React-Appのフォルダ構造に基づいており、すべてのアプリケーションコードはsrcフォルダに配置されますが、パターンはあらゆるプロジェクト構成に適用できます。

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

使用法の概要

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

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

npm install @reduxjs/toolkit react-redux

Redux Storeの作成

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 Storeを提供

ストア作成後、React-Reduxの<Provider>をsrc/index.jsでアプリケーション全体を囲むことでReactコンポーネントから利用可能にします。作成したReduxストアをインポートし、<App>を<Provider>で囲み、ストアをプロパティとして渡します：

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

const root = createRoot(document.getElementById('root')!)

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

Redux Stateスライスの作成

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でアクションをディスパッチします。<Counter>コンポーネントを含むsrc/features/counter/Counter.jsファイルを作成し、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>
  )
}

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

対応するReduxアクションがストアにディスパッチされます
カウンタースライスのreducerがアクションを検知し、状態を更新します
<Counter>コンポーネントがストアから新しい状態値を取得し、新しいデータで再レンダリングします

学んだこと

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

まとめ

configureStoreでReduxストアを作成
- configureStoreは名前付き引数としてreducer関数を受け取る
- configureStoreは適切なデフォルト設定でストアを自動セットアップ
ReactアプリケーションコンポーネントにReduxストアを提供
- <App />をReact-Reduxの<Provider>コンポーネントで囲む
- <Provider store={store}>としてReduxストアを渡す
createSliceでRedux「スライス」reducerを作成
- createSliceを文字列名、初期状態、名前付きreducer関数で呼び出す
- Reducer関数はImmerを使用して状態を「変更」できる
- 生成されたスライスreducerとアクションクリエーターをエクスポート
ReactコンポーネントでReact-ReduxのuseSelector/useDispatchフックを使用
- useSelectorフックでストアからデータを読み取る
- useDispatchフックでdispatch関数を取得し、必要に応じてアクションをディスパッチ

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

動作する完全なカウンターアプリケーションをCodeSandboxで示します：

次のステップ

すべての主要な機能をカバーする完全な「Redux Essentials」チュートリアルを通すことをお勧めします。Redux Toolkitに含まれる主要なパーツ、解決する問題、実践的なアプリケーション構築方法を学べます。

また「Redux Fundamentals」チュートリアルを読むことで、Reduxの動作原理、Redux Toolkitの役割、正しい使用方法を完全に理解できます。

はじめに​

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

使用法の概要​

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

Redux Storeの作成​

ReactにRedux Storeを提供​

Redux Stateスライスの作成​

ストアにスライスReducerを追加​

ReactコンポーネントでのRedux状態とアクションの使用​

学んだこと​

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

次のステップ​