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

Redux 入門

非公式ベータ版翻訳

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

Redux は、予測可能でメンテナンス性の高いグローバル状態管理のための JavaScript ライブラリです。

一貫した動作を実現し、さまざまな環境（クライアント、サーバー、ネイティブ）で動作し、テストが容易なアプリケーションの開発を支援します。さらに、ライブコード編集とタイムトラベルデバッガーを組み合わせた優れた開発者体験を提供します。

React と組み合わせて使用することも、他のビューライブラリと併用することも可能です。サイズは小さい（依存関係を含めても 2kB）ながら、豊富なアドオンエコシステムを備えています。

Redux Toolkit は、Redux ロジックを記述するための公式推奨アプローチです。Redux コアをラップし、Redux アプリ構築に不可欠なパッケージと機能を含んでいます。Redux Toolkit は推奨ベストプラクティスを組み込み、ほとんどの Redux タスクを簡素化し、一般的なミスを防止し、Redux アプリケーションの開発を容易にします。

RTKにはストア設定、不変更新ロジックを用いたReducer作成、状態の「スライス」一括生成など、一般的なユースケースを簡素化するユーティリティが含まれます。

初めてプロジェクトをセットアップする新規ユーザーでも、既存アプリケーションを簡素化したい経験豊富なユーザーでも、**Redux Toolkit**はReduxコードの改善に役立ちます。

インストール​

Redux Toolkit​

Redux Toolkit は、モジュールバンドラーや Node アプリケーションで使用できる NPM パッケージとして提供されています：

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

新しい Redux プロジェクトの作成​

Redux で新しいアプリを開始する推奨方法は、公式テンプレートのいずれかを使用することです。これらのテンプレートには Redux Toolkit が事前設定されており、開始用のサンプルアプリが含まれています。

新しいプロジェクトを作成するには、tiged などのツールを使用してテンプレートをクローンおよび展開します。

# Vite + TypeScript
npx tiged reduxjs/redux-templates/packages/vite-template-redux my-app

# Create React App + TypeScript
npx tiged reduxjs/redux-templates/packages/cra-template-redux-typescript my-app

# Create React App + JavaScript
npx tiged reduxjs/redux-templates/packages/cra-template-redux my-app

# Expo + TypeScript
npx tiged reduxjs/redux-templates/packages/expo-template-redux-typescript my-app

# React Native + TypeScript
npx tiged reduxjs/redux-templates/packages/react-native-template-redux-typescript my-app

# Standalone Redux Toolkit App Structure Example
npx tiged reduxjs/redux-templates/packages/rtk-app-structure-example my-app

公式テンプレートに加えて、コミュニティも他のテンプレートを作成しています。例: Next.js with-redux テンプレート。

# Next.js + Redux
npx create-next-app --example with-redux my-app

Redux コア​

Redux コアライブラリは、モジュールバンドラーや Node アプリケーションで使用できる NPM パッケージとして提供されています：

# NPM
npm install redux

# Yarn
yarn add redux

このパッケージにはプリコンパイルされたESMビルドが含まれており、ブラウザで直接<script type="module">タグとして使用できます。

詳細については、インストールページをご覧ください。

基本的な例​

アプリ全体のグローバル状態は、単一の ストア 内のオブジェクトツリーとして保存されます。状態ツリーを変更する唯一の方法は、発生した内容を記述したオブジェクトである アクション を作成し、それをストアに ディスパッチ することです。アクションに応じて状態がどのように更新されるかを指定するために、古い状態とアクションに基づいて新しい状態を計算する純粋な リデューサー 関数を作成します。

Redux Toolkit は、Redux ロジックの記述とストア設定のプロセスを簡素化します。Redux Toolkit を使用すると、基本的なアプリロジックは次のようになります：

import { createSlice, configureStore } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: 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
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

// Can still subscribe to the store
store.subscribe(() => console.log(store.getState()))

// Still pass action objects to `dispatch`, but they're created for us
store.dispatch(incremented())
// {value: 1}
store.dispatch(incremented())
// {value: 2}
store.dispatch(decremented())
// {value: 1}

状態を直接変更する代わりに、_アクション_と呼ばれるプレーンなオブジェクトで実行したい変更を指定します。その後、_リデューサー_と呼ばれる特別な関数を作成し、各アクションがアプリケーション全体の状態をどのように変換するかを決定します。

典型的なReduxアプリでは、単一のストアと単一のルートリデューサー関数が存在します。アプリが成長するにつれて、ルートリデューサーを小さなリデューサーに分割し、状態ツリーの異なる部分を独立して操作します。これはReactアプリに単一のルートコンポーネントがありながら、多くの小さなコンポーネントで構成されているのとまったく同じパターンです。

このアーキテクチャはカウンターアプリには過剰に思えるかもしれませんが、このパターンの美点は大規模で複雑なアプリに驚くほどスケールすることです。また、すべての変更を引き起こしたアクションまでトレースできるため、非常に強力な開発者ツールを可能にします。ユーザーセッションを記録し、すべてのアクションを再生するだけで再現できます。

Redux Toolkitを使用すると、同じReduxの動作とデータフローを維持しながら、読みやすい短いロジックを記述できます。

レガシー例​

比較のため、抽象化なしの元のReduxレガシー構文は次のようになります：

import { createStore } from 'redux'

/**
 * This is a reducer - a function that takes a current state value and an
 * action object describing "what happened", and returns a new state value.
 * A reducer's function signature is: (state, action) => newState
 *
 * The Redux state should contain only plain JS objects, arrays, and primitives.
 * The root state value is usually an object. It's important that you should
 * not mutate the state object, but return a new object if the state changes.
 *
 * You can use any conditional logic you want in a reducer. In this example,
 * we use a switch statement, but it's not required.
 */
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counterReducer)

// You can use subscribe() to update the UI in response to state changes.
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// There may be additional use cases where it's helpful to subscribe as well.

store.subscribe(() => console.log(store.getState()))

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}

Reduxを学ぶ​

Reduxを学ぶための様々なリソースが用意されています。

Redux Essentialsチュートリアル​

Redux Essentialsチュートリアルは、最新の推奨APIとベストプラクティスを使用して「正しいReduxの使い方」を教える「トップダウン」形式のチュートリアルです。まずここから始めることをお勧めします。

Redux Fundamentalsチュートリアル​

Redux Fundamentalsチュートリアルは、抽象化なしで基本原理から「Reduxの仕組み」を教え、標準的なRedux使用パターンが存在する理由を説明する「ボトムアップ」形式のチュートリアルです。

モダンReduxを学ぶライブストリーム​

ReduxメンテナーのMark Eriksonが「Learn with Jason」番組に出演し、現代におけるReduxの推奨使用法を解説しました。この番組では、Redux ToolkitとReact-ReduxフックをTypeScriptで使用する方法、および新しいRTK Queryデータ取得APIを示すライブコーディング例が含まれています。

文字起こしとサンプルアプリのソースコードへのリンクは「Learn Modern Redux」番組ノートページをご覧ください。

追加チュートリアル​

その他のリソース​

ヘルプとディスカッション​

**Reactiflux Discordコミュニティの#reduxチャンネル**が、Reduxの学習と使用に関する公式サポート窓口です。Reactifluxは質問や学習に最適な場所です。ぜひ参加してください！

質問はStack Overflowの**#reduxタグ**でも受け付けています。

バグ報告やフィードバックがある場合は、GitHubリポジトリでIssueを登録してください。

Reduxを採用すべきか？​

Reduxは状態管理を体系化する貴重なツールですが、プロジェクトに適しているかどうかを検討する必要があります。「使うべきと言われたから」という理由だけで採用せず、メリットとトレードオフを理解した上で判断してください。

Reduxの採用が有効なケース：

  • 時間の経過とともに変化する適切な量のデータがある

  • 状態の信頼できる単一情報源が必要

  • 最上位コンポーネントですべての状態を管理する方法が限界を迎えている

Reduxの適切な使用方法に関する詳細: