ReduxはJavaScriptアプリのための、予測可能な状態コンテナです。
(WordPressのフレームワークと混同しないでください – Redux Framework.)

アプリケーションが異なる環境（クライアント、サーバー、そしてネイティヴ）で一貫して動く手助けをします。テストも簡単です。さらに次のような、開発者のための素晴らしい体験も提供します。

元に戻したり、やり直したりできるデバッガーで、コードを自動反映しながら編集する (live code editing combined with a time traveling debugger)

ReduxはReactや、他のどんなViewライブリとも使うことができます。 Reduxは軽量です。(依存を含め、2kB)

Reduxを開発者から学ぶ:
パート１： Reduxを始めよう（Part 1: Getting Started with Redux）（３０本の無料動画）
パート２： Reduxの特徴的な書き方でアプリケーションを作ろう (Part 2: Building React Applications with Idiomatic Redux ) （２７本の無料動画）

先に進む前に

こちらも読んでください:
あなたにReduxは必要ないかもしれない (You Might Not Need Redux)

開発者の経験

Ruduxは“タイムトラベルしながら自動で再読み込みする (Hot Reloading with Time Travel)”という、Reactヨーロッパの講演で活動しながら書きました。目的は、最小のAPIでありながら完全に予測可能なふるまいをする状態管理ライブラリです。このライブラリで、次のことができます。開発者から、何も買わなくても。

ログを取る
自動で再読み込み
タイムトラベル
ユニバーサルアプリ
記録や再生

影響

ReduxはFluxの考えを発展させます。しかし、Fluxの複雑さは排除します。そのための手がかりを、Elmから得ました。 Elmを使ったことがなくても、Reduxは始めるのに数分しか掛かりません。

インストール

安定したバージョンをインストールする：

npm install --save redux

これはパッケージマネージャとして、npmを使っていることが前提です。

もし使っていないなら、unpkgにあるファイルへアクセスしてダウンロードするか、お使いのパッケージマネージャでこれらのファイルを指定できます。

Reduxがもっともよく読み込まれているのは、CommonJSモジュールのコレクションとしてです。これらのモジュールは、reduxをWebpack、Browserify、またはNode.js環境でインポートすると利用できます。もし最先端でいるのが好きなら、Rollupを使うこともできます。これも同様に対応しています。

上記のようなモジュールバンドラを使っていなくても、大丈夫です。redux npmパッケージには、あらかじめコンパイルされた本番と開発用のUMDビルドが同梱されています。場所はdist フォルダです。バンドラなしで直接使えますし、人気のあるJavaScriptのモジュールローダーや環境の多くと互換性があります。例えばWebページに<script>タグで、UMDビルドを読み込むことができます。または、Bowerでインストールする (tell Bower to install it)ことも。 UMDビルドは、 Reduxをwindow.Reduxというグローバル変数で利用できるようにします。

ReduxのソースコードはES2015で書かれています。しかしCommonJSとUMDビルドの両方で、ES5にあらかじめコンパイルされています。そのためすべてのモダンブラウザ (any modern browser)で動きます。Reduxを始める (get started with Redux)ために、Babelやモジュールバンドラを使う必要はありません。

補完パッケージ

ほとんどの場合、Reactバインディング (the React bindings)と開発者ツール (the developer tools)も必要です。

npm install --save react-redux
npm install --save-dev redux-devtools

Redux自体と違い、Reduxとバインディング（連携）する多くのパッケージはUMDビルドを提供していません。そのため最も快適な開発を体験するためには、CommonJSのモジュールバンドラをおすすめします。WebpackやBrowserifyなどです。

要点

アプリのすべての状態は、1つの Store 内にある1つのオブジェクトツリーで保持されます。状態ツリーを変化させる唯一の方法は、Action を送ることです。Actionは、何が起きたのかを説明するオブジェクトです。どのようにActionが状態ツリーを転換するか明示するために、純粋な（副作用を起こさない）Reducer を書きます。

これだけです！

import { createStore } from 'redux'

/**
 * これはReducerです。状態とActionを引数に取り、新たな状態を返す純粋関数です。(state, action) => state
 * Actionによって、状態がどのように新たな状態へ転換されるかを説明しています。
 *
 * 状態の形はあなた次第です。最小限にすることも、配列やオブジェクトにすることもできます。
 * または、Immutable.jsのデータ構造であっても構いません。
 * ただ一つ重要なことは、状態オブジェクトを書き換えるべきではないということです。
 * その代わり、状態が変化したら新たなオブジェクトを返します。
 *
 * この例では、`switch`文と文字列を使います。
 * しかしプロジェクトと整合性があるなら、他のよくある書き方に従ってヘルパーを使うこともできます。
 * 例えば、map関数のような。
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

// アプリの状態を保持するReduxのStoreをつくります。
// APIは、 { subscribe, dispatch, getState }。
let store = createStore(counter)

// 状態の変化に応じてUIを更新するためにsubscribe()が使えます。
// たいていはsubscribe()を直接呼び出すのではなく、Viewとバインディング（連携）するライブラリを使います。(例： React Redux)。
// しかし、現在の状態をローカルストレージに保持するのも簡便です。

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

// 内部状態を変更する唯一の方法は、ActionをDispatch（送信）することです。
// Actionはシリアライズ（訳注：データをネットワークで送受信できるように変換すること。直列化）、ログをとる、また保持してもう一度実行などができます。
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

状態を直接変更してはいけません。代わりに Action という単なるオブジェクトで、起こしたい変更を明示します。そして Reducer という特別な関数を書きます。この関数で、アプリ全体の状態をそれぞれのActionがどのように転換するか決めます。

Fluxを書いたことがあるなら、理解しなければならない1つの重要な違いがあります。それはReduxがDispatcherを持たない、言い換えれば多数のStoreに対応しないということです。代わりに1つのルート（大元）となるReduce関数と、ただ1つのStoreがあります。アプリが大きくなっても、Storeは追加しません。代わりにルートReducerを、複数のより小さなReducerに分割します。これらのReducerは、状態ツリーの異なる部分を独自に処理します。これはまさにちょうど、Reactアプリで1つのルートコンポーネントを持つようなものです。しかし実際には、たくさんの小さなコンポーネントで構成されているのです。

このアーキテクチャ（構成）は、計数アプリのためにはやり過ぎだと思われるかもしれません。しかしこのパターンの美しさは、とても上手に大きく複雑なアプリへ拡張できることです。また、とても強力な開発者ツールも使えます。なぜなら、Actionを起点としたすべての変更を追跡できるからです。ユーザーのセッションを記録することや、Actionを再実行してもう一度作ることもできます。

Reduxを開発者から学ぶ

Reduxを始めよう (Getting Started with Redux)は、無料の動画コースです。全部で30本あり、Reduxの作者であるDan Abramovが解説しています。ドキュメントの“初級”パートを補足しつつ、いくつかの知見も加えています。不変性、テスト、Reduxのベストプラクティス、そしてReactとともにReduxを使うことについてです。このコースは無料です。今後も変わらずに。

“@dan_abramov によるegghead.ioの素晴らしいコース - #reduxをどうやって使うかだけじゃない。どうやって、またどうしてReduxが作られたのかを示してくれる。 (Great course on egghead.io by @dan_abramov - instead of just showing you how to use #redux, it also shows how and why redux was built!)”
Sandrino Di Mattia

“@dan_abramovの『Reduxを始めよう』をじっくり観ている。 - この動画で、とてもシンプルな概念が理解できることに驚く。 (Plowing through @dan_abramov 'Getting Started with Redux' - its amazing how much simpler concepts get with video.)”
Chris Dhanaraj

“@eggheadioにある@dan_abramovによるReduxの動画シリーズは壮観だ！ (This video series on Redux by @dan_abramov on @eggheadio is spectacular!)”
Eddie Zaneski

“イカした奴がやってきた。揺るぎない原理に則っている。(ありがとう、そして@dan_abramovと@eggheadioはよくやった！) (Come for the name hype. Stay for the rock solid fundamentals. (Thanks, and great job @dan_abramov and @eggheadio!))”
Dan

“@dan_abramovによるReduxのビデオシリーズに、何度も心を揺さぶられている。いくつか重大なリファクタリングをするつもり。 (This series of videos on Redux by @dan_abramov is repeatedly blowing my mind - gunna do some serious refactoring)”
Laurence Roberts

さぁ、あなたは何をためらっているんですか？

３０本の無料動画を観よう！ (Watch the 30 Free Videos!)

このコースが気に入ったら、サブスクリプション契約 (buying a subscription)してEggheadをサポートすることを検討してください。契約者は動画中の例すべてのソースコードにアクセスできます。加えて、たくさんの上級レッスンもあります。このレッスンにはJavaScriptの深掘り、React、Angular、その他多くが含まれます。多くのEggheadインストラクター (Egghead instructors)は、オープンソースライブラリの作者でもあります。そのためセブスクリプション契約は、彼らがやってきたことに感謝する良い方法です。

ドキュメント

オフラインで読むためのPDF、ePub、そしてMOBIもあります。これらの作り方は、こちらをご覧ください：paulkogel/redux-offline-docs.

オフラインのためのドキュメントは、こちらを：devdocs

使用例

ほとんどすべての例は、CodeSandboxというサンドボックスに対応しています。オンラインで試せる双方向版のコードです。

NPMのエコシステムが初めてでプロジェクトを立ち上げたり、運営するのに問題を抱えている。あるいは、上記の重要な箇所をどこにペーストすれば良いかよく分からない。そんな方は、simplest-redux-example（一番シンプルなReduxの例）を確認してください。Reduxとともに、ReactとBrowserifyを使っています。

議論

ReactifluxDiscordコミュニティの#reduxチャンネルに参加してください。

感謝

The Elm Architecture　Reducerとともに状態更新をするモデルへの素晴らしい導入に
Turning the database inside-out　心を揺さぶってくれて
Developing ClojureScript with Figwheel　再評価は“ただ動作する”べきだと納得させてくれて
Webpack　自動的なモジュール置き換えに
Flummox　常用文やシングルトンなしにFluxを手がけるよう教えてくれて
disto　自動で再読み込みができるStoreの構想を実証してくれて
NuclearJS　このアーキテクチャで高い性能を得られると実証してくれて
Om　1つの状態原子というアイデアを広めてくれて
Cycle いかに多くの場合に、関数が最善のツールかを示してくれて
React　実用的な革新に

reduxのNPMパッケージ名を渡してくれたJamie Patonに、特別な感謝を。

ロゴ

公式ロゴはこちらのGitHubで。

更新履歴

このプロジェクトはセマンティックバージョニング (Semantic Versioning)に準拠しています。すべてのリリースは移行説明とともに、リリース (Releases)ページに記録されています。

パトロン（後援者）

Redux上の作業はコミュニティによって援助されています。 (funded by the community).
これを可能にした、傑出した会社を訪問してください：

Reduxパトロンの全リストを確認して (See the full list of Redux patrons)ください。Reduxを使う人達と会社の (people and companies that use Redux)増え続けるリストも。

ライセンス

MIT

はじめに

推薦文