Awesome Redux Libraries & Learning Material
Redux Libraries & Learning Materialを扱う資料や関連プロジェクトをまとめたAwesomeリストです。
目次
コードアーキテクチャ
ソースコード全体の構造を改善し、コードについての推論を容易にすることを目的とする。
- redux-schema - Redux向けの自動アクション、リデューサー、検証。
- redux-tcomb - Redux向けの不変かつ型検査済みの状態・アクション。
- redux-action-tree - Reduxで動くCerebralシグナル。
- redux-elm - JavaScriptにおけるElmアーキテクチャ。
ユーティリティ
- redux-orm - Reduxストア内のリレーショナルデータを管理する、小さくシンプルで不変なORM。
- redux-api-middleware - APIを呼び出すReduxミドルウェア。
- redux-ignore - Reduxアクションを無視する高階リデューサー。
- redux-modifiers - さまざまなデータ構造を操作するReduxリデューサーを書くための汎用関数コレクション。
- rereduce - Redux向けリデューサーライブラリ。
- redux-search - クライアント側検索向けReduxバインディング。
- redux-logger - Redux向けロガーミドルウェア。
- redux-immutable - Immutable.js状態で動作するRedux combineReducers相当の関数を作成するために使う。
- reselect - Redux向けセレクターライブラリ。
- redux-requests - 実行中リクエストをReduxリデューサーで管理し、重複したリクエスト発行を避ける。
- redux-undo - Redux状態コンテナーへ元に戻す/やり直す機能を加える高階リデューサー。
- redux-bug-reporter - Redux向けバグ報告・バグ再生ツール。
- redux-transducers - Redux向けトランスデューサーユーティリティ。
ストア永続化
- redux-storage - 柔軟なバックエンドを備えるRedux向け永続化レイヤー。
- redux-persist - Reduxストアを永続化・再水和する。
副作用
副作用/非同期アクション
- redux-saga - Reduxアプリ向け代替副作用モデル。
- redux-promise-middleware - 条件付き楽観的更新を伴うPromiseの解決・拒否に対応するReduxミドルウェア。
- redux-effects - 純粋関数を書けば、redux-effectsが残りを処理する。
- redux-thunk - Redux向けThunkミドルウェア。
- redux-connect - react-routerで非同期propsを解決するデコレーターを提供し、Reactでのサーバーサイドレンダリング処理に非常に役立つ。
- redux-loop - elm-effects・ElmアーキテクチャをReduxへ移植し、リデューサーから返すことで副作用を自然かつ純粋に連鎖させる。
- redux-side-effects - 副作用をリデューサー内に保ちながら純粋性を維持するReduxツールセット。
- redux-logic - ビジネスロジックとアクション副作用を組織するReduxミドルウェア。
- redux-observable - “Epics”を使い、Reduxのアクション副作用を扱うRxJSミドルウェア。
- redux-ship - 合成可能でテスト可能、型付け可能な副作用。
コードスタイル
ソースコードの一部を読み書きしやすくすることを目的とする。
- redux-act - Redux向けアクション・リデューサーを作る意見のあるライブラリ。
- redux-crud - Redux CRUDアプリケーション向け標準アクション・リデューサーのセット。
開発ツール/検査ツール
- redux-devtools-inspector - もう一つのRedux DevToolsモニター。
- redux-diff-logger - Reduxの状態間差分ロガー。
- redux-devtools-chart-monitor - Redux DevTools向けチャートモニター。
- redux-devtools - ホットリロード、アクション再生、カスタマイズ可能なUIを備えるRedux DevTools。
- redux-devtools-dispatch - アプリが適切にReactするか試すため、アクションを手動ディスパッチする。
- redux-devtools-dock-monitor - Redux DevToolsモニター向け、サイズ変更・移動可能なドック。
- redux-devtools-filterable-log-monitor - Redux DevTools向けフィルタリング可能なツリービューモニター。
- redux-devtools-log-monitor - ツリービューを持つRedux DevToolsの既定モニター。
- remote-redux-devtools - Redux DevToolsをリモートで使う。
React統合
- redux-test-recorder - UI対話を通じてリデューサーのテストを自動生成するReduxミドルウェア。
- react-redux - Redux向け公式Reactバインディング。
- react-easy-universal - React・Reduxによるユニバーサルルーティングとレンダリングは難しすぎた。今は簡単。
- redux-form-material-ui - Material UIをRedux Formと使いやすくするラッパーコンポーネントのセット。
ルーティング
- redux-async-connect - 非同期データを要求してRedux状態へ保存し、Reactコンポーネントへ接続できる。
- redux-tiny-router - Redux・ユニバーサルアプリ向けに作られたルーター。ルーターをコントローラーとして使うのをやめよう、これは単なる状態。
- redux-router - React Router向けReduxバインディング – ルーター状態をReduxストア内に保持する。
- react-router-redux - react-routerとReduxの同期を保つ、容赦なくシンプルなバインディング。
- ground-control - React Router・Redux向け、スケーラブルなリデューサー管理 & 強力なデータ取得。
フォーム
- redux-form - フォーム状態をReduxストアに保持するためreact-reduxを使う高階コンポーネント。
- react-redux-form - Reduxを使いReactでフォームを簡単に作成する。
コンポーネント状態
- redux-react-local - Reduxを通じたローカルコンポーネント状態。
- redux-ui - React Redux向けの簡単なUI状態管理。
その他の統合
Flux
- redux-actions - Redux向けFlux Standard Actionユーティリティ。
- redux-promise - Redux向けFSA準拠Promiseミドルウェア。
Backbone
- backbone-redux - backboneコレクションとReduxストアの同期を保つ簡単な方法。
Falcor
- redux-falcor - Reduxフロントエンドをfalcorバックエンドへ接続する。
RxJS
- redux-observable - “Epics”を使い、Reduxのアクション副作用を扱うRxJSミドルウェア。
- rx-redux - RxJSを使ったReduxの再実装。
- redux-rx - Redux向けRxJSユーティリティ。
- redurx - RxJSを使うRedux’ishな関数型状態管理。
Electron
- redux-electron-store - electronプロセス間の自動同期を可能にするReduxストアエンハンサー。
Deku
- deku-redux - deku < v2におけるReduxバインディング。
その他
- redux-rollbar-middleware - 例外をアクションでラップし、現在の状態とともにRollbarへ送信するReduxミドルウェア。
- kasia - WordPress API向けReact Reduxツールセット。
ボイラープレート
ボイラープレート/スキャフォールド/スターターキット/ジェネレーター/スタックアンサンブル
- redux-cli - Redux/Reactアプリをより速く構築する、意見のあるCLI。
- reactuate - React/Reduxスタック(ボイラープレートキットではない)。
- react-chrome-extension-boilerplate - Chrome Extension React.jsプロジェクト向けボイラープレート。
- universal-redux - ユニバーサル(アイソモーフィック)レンダリングでReact・Reduxのコーディングをすぐ開始できるNpmパッケージ。必要な場合にだけExpressセットアップ・Webpack設定を管理する。
- generator-react-aspnet-boilerplate - 既存の技法を活用し、ASP.NET Core 1でアイソモーフィックReactアプリケーションを構築するための出発点。
- generator-redux - Redux向けCLIツール: 開発ツールを備えた次世代関数型Flux/React。
- generator-react-webpack-redux - Reduxサポートを含むReact Webpackジェネレーター。
- socrates - ボイラープレートを減らし、良い習慣を促進する小型(8kb)のバッテリー同梱Reduxストア。
その他
- redux-core - 最小限のRedux。
学習資料
-
Reduxの概念
Redux公式ドキュメントは、Reduxの中核原則を優れた形で説明している。
-
なぜ不変データ構造なのか
React公式ドキュメントのパフォーマンスガイドは、不変データ構造とは何か、なぜ重要な役割を担うのかをよく説明している。
-
副作用
Redux Loopのreadmeは、Reduxの文脈における副作用について優れた洞察を与える。
上記の資料を読めば、Reduxでアプリを書くためのよい出発点が得られる。さらに知りたい場合は、次のリソースを確認してください。
-
関数型プログラミング - 基礎
この投稿は、YouTubeのインスタント検索デモアプリを構築しながら、関数型プログラミングの基本概念を扱う。
-
リアクティブプログラミング
このリアクティブプログラミング入門は、リアクティブプログラミングを明快に説明する。
-
関数型プログラミング - さらに先へ
よく書かれた記事は、関数型言語で実装される興味深いコンピューターサイエンス概念と、それがJavaScriptへどう適用されるかを扱う。
-
モナド
モナドに興味がありますか?Wikipediaはモナドの概要を提供し、この記事はグラフィックスと簡単な例を使いモナドをより詳しく説明する。