エコシステム
Reduxは小さなライブラリです。しかし決まりごととAPIは注意深く選ばれています。ツールと拡張機能のエコシステムを生み出すためです。
拡張機能の一覧として、Awesome Reduxがおすすめです。使用例や常用文、ミドルウェア、ユーティリティのライブラリなどが載っています。 React/Redux Linksには、 チュートリアルやその他の役立つ資料が掲載されています。ReactやReduxを学ぶ、すべての人に役立ちます。そしてRedux Ecosystem Linksは、多くのReduxに関連したライブラリとアドオンを列挙しています。
このページでは、Reduxのメンテナ(保守管理する人)たちが個人的に調査したものだけを紹介するつもりです。だからと言って、その他のものを試してみる気をなくさないでください!エコシステムはあまりに早く成長しているし、私たちの時間は限られています。そのため、すべてを確認することはできません。 これら“スタッフ選定”を検討し、Reduxとともに何かすごいものを作ったら、ためらわずにPR(プルリクエスト)を送ってください。
Reduxを学ぶ
動画
- Reduxを始めよう (Getting Started with Redux) — 作者から直接、Reduxの基本を学びます (30本の無料動画)
- Reduxを学ぶ (Learn Redux) — シンプルな写真アプリを作ります。Redux、React Router、そしてReact.jsの背後にある、核となるアイデアを分かりやすくしています
アプリ使用例
- 公式使用例 (Official Examples) — 公式の使用例です。それぞれ異なるReduxのテクニックを取り扱っています
- SoundRedux — Reduxで作られたSoundCloudのクライアントアプリです
- grafgiti — GitHubのコントリビューションウォール(訳注:日本では「草」や「芝生」などと呼ばれている)で落書きを作ります
- React-lego — 一度に1つの機能だけ、Reactに組み込む手順(訳注:簡単に比較できるよう、GitHubのブランチごとに様々なReact関連技術を追加している)
チュートリアルと記事
- Redux Tutorial
- Redux Egghead Course Notes
- Integrating Data with React Native
- What the Flux?! Let's Redux.
- Leveling Up with React: Redux
- A cartoon intro to Redux
- Understanding Redux
- Handcrafting an Isomorphic Redux Application (With Love)
- Full-Stack Redux Tutorial
- Getting Started with React, Redux, and Immutable
- Secure Your React and Redux App with JWT Authentication
- Understanding Redux Middleware
- Angular 2 — Introduction to Redux
- Apollo Client: GraphQL with React and Redux
- Using redux-saga To Simplify Your Growing React Native Codebase
- Build an Image Gallery Using Redux Saga
- Working with VK API (in Russian)
講演
Live React: 自動再読み込みとタイムトラベル (Hot Reloading and Time Travel) — Reduxによって課された制約がどのようにタイムトラベル(元に戻す/やり直す)と自動再読み込みを簡単にするかを見る
ヤニをとる(Cleaning the Tar): Firefoxの開発者ツール内でReactを使う(Using React within the Firefox Developer Tools) — 既存のMVCアプリケーションを段階的にReduxへ移行する方法を学ぶ
Redux: アプリケーションの状態を分かりやすくする (Simplifying Application State) — Reduxアーキテクチャの導入
Reduxを使う
バインディング(連携プログラム)
- react-redux — React
- ng-redux — Angular
- ng2-redux — Angular 2
- backbone-redux — Backbone
- redux-falcor — Falcor
- deku-redux — Deku
- polymer-redux - Polymer
- ember-redux - Ember.js
ミドルウェア
- redux-thunk — 非同期なActionクリエイターを書く、最も簡単な方法
- redux-promise — FSAに対応したPromise(プロミス)のミドルウェア
- redux-axios-middleware — axiosのHTTPクライアントでデータ取得するReduxのミドルウェア
- redux-observable — "Epics"を使った、Actionの副作用のためのRxJSのミドルウェア
- redux-cycles — Cycle.jsを使ってReduxの非同期なActionを処理
- redux-logger — すべてのRedux Actionと次の状態のログを取る
- redux-immutable-state-invariant — 開発中に、状態変更を警告する
- redux-unhandled-action — 開発中に、状態変更を引き起こさないActionを警告する
- redux-analytics — Reduxのための解析ミドルウェア
- redux-gen — Reduxのためのジェネレータのミドルウェア
- redux-saga — Reduxのための、別の副作用モデル
- redux-action-tree — Reduxのための、合成可能なCerebral形式のシグナル
- apollo-client — シンプルなキャッシュクライアント。Redux上で作られたすべてのGraphQLとUIフレームワークに対応
ルーティング(ページ遷移)
- react-router-redux — ReactルータとReduxの同期を保つ、徹底してシンプルなバインディング(連携プログラム)
- redial — ユニバーサルなデータ取得やルートのライフサイクルをReactのために管理する。Reduxとの相性も良い
コンポーネント(構成要素)
- redux-form — ReduxでReactフォームの状態を保つ
- react-redux-form — ReduxでReactのフォームを簡単に作る
- redux-resource — Reduxでリモートサーバーのリソースを管理する
エンハンサー(強化プログラム)
- redux-batched-subscribe — Storeの購読者のために、一括処理やデバウンシングした呼び出し(訳注:抑制した呼び出し。例えば、最大で○秒に1回しか呼び出されないようにする)をカスタマイズ
- redux-history-transitions — 任意のActionに基づいたルート遷移
- redux-optimist — あとでコミットされるか、または元に戻される可能性のあるActionを楽観的に適用する
- redux-optimistic-ui — 型にとらわれず(訳注:JSのオブジェクトだけでなく、 immutable.jsなどでも良い)、楽観的に更新するReducerのエンハンサー
- redux-undo — Ruducerのための手っ取り早い、元に戻す/やり直す(Undo/Redo)とAction履歴
- redux-ignore — 配列かフィルター関数によって、ReduxのActionを無視(訳注:特定のActionを無視することで、パフォーマンスの問題を回避)
- redux-recycle — 特定のActionに対して、Reduxの状態をリセット
- redux-batched-actions — 1つの購読者通知で、複数のActionをDispatch(送信)
- redux-search — Web Workerで自動的にリソースをインデックスし、ブロッキングなしで検索
- redux-electron-store — Electronの複数プロセス間でReduxのStoreを同期するStoreエンハンサー
- redux-loop — Reducerから返すことで、純粋かつ自然に作用を並べる(訳注:Reducerは通常、同期的な状態遷移のみを扱う。つまり、Actionに対してReducerから新しい状態が返される。しかしredux-loopが加えられたReducerは、Actionに対して非同期関数の実行も定義できる。そしてその関数の結果次第で、新たなActionを呼び出す。ただし通常のReducerと同じく、最終的に返すのは状態としての単なるオブジェクト)
- redux-side-effects — Generatorを利用して、純粋なReducerから宣言の形で副作用をyieldする
ユーティリティ(便利プログラム)
- reselect — NuclearJSに触発された効率的な生成データのセレクタ
- normalizr — Reducerが簡単に受け取って処理できるように、ネストされたAPIレスポンスを正規化
- redux-actions — ReducerとAction Creatorを書くときに、常用文を減らす(訳注:書かないといけないコード量を削減する)
- redux-act — ReducerとAction Creatorを作るためのライブラリ
- redux-transducers — Reduxのための変換ユーティリティ
- redux-immutable — Reduxの
combineReducers
と同等で、Immutable.jsの状態と協働する関数 - redux-tcomb — Reduxのための、不変で型検査された状態とAction
- redux-mock-store — アプリをテストするため、ReduxのStoreをモック
- redux-actions-assertions — ReduxのActionをテストするためのアサーション
- redux-bootstrap — Reduxアプリケーションのための、ブートストラッピング関数(訳注:StoreやReducerの作成などを自動化)
- redux-data-structures — Reducerファクトリ(高階関数)。Counter、Map、List(キュー、スタック)、Setなど、共通処理を扱うReducerが作れる
開発者ツール
- Redux DevTools — タイムトラベルUIの付いたActionロガー、Reducerのための自動再読み込みとエラーハンドリング。 Reactヨーロッパで初めてデモされた (first demoed at React Europe)
- Redux DevTools Extension — Redux開発者ツールをラップ(内包)して追加機能を提供する、Chromeの拡張機能
開発者ツールのモニター
- Log Monitor — Redux開発者ツールのデフォルトモニター。ツリー状の表示ができる
- Dock Monitor — Redux開発者ツールのモニターのための、サイズ変更と移動が可能なDock
- Slider Monitor — Redux開発者ツールのためのカスタムモニター。記録されたActionを再生する
- Inspector — Redux開発者ツールのためのカスタムモニター。Actionのフィルタリング、差分の調査、深くネストされた状態の変更監視のために状態のパスをピン留めしたりできる
- Diff Monitor — Redux開発者ツールのためのモニター。Action間でのStoreの差分が取れる
- Filterable Log Monitor — Redux開発者ツールのためのモニター。フィルタリング可能なツリー状の表示ができる
- Chart Monitor — Redux開発者ツールのためのモニター。チャート表示ができる
- Filter Actions — Redux開発者ツールのための組み立てできる(訳注:他のモニターを内包できる)モニター。Actionをフィルタリングできる
コミュニティ規約
- Flux Standard Action — Flux Actionオブジェクトのための、 人に優しい基準
- Canonical Reducer Composition — ネストされたReducer合成のための、独自の意見を持った基準
- Ducks: Redux Reducer Bundles — Reducer、Action Type、Actionを束ねる提案
翻訳
- 中文文档 — 中国語
- 繁體中文文件 — 繁体字中国語
- Redux in Russian — ロシア語
- Redux en Español — スペイン語
その他
- Awesome Redux はReduxに関連したリポジトリの、広範囲なリストです。
- React-Redux Links はReact、Redux、ES6などについて、高品質な記事やチュートリアル、関連コンテンツなどが集められています。
- Redux Ecosystem Links はReduxに関連したライブラリ、アドオン、ユーティリティを分類したコレクションです。