最近Reduxを発見しました。それはすべてよさそうだ。FluxではなくReduxを使用することの欠点、落とし穴、妥協点はありますか？ありがとう

ここでReduxの作者！

あなたはそれを使って次の妥協をするつもりだと言いたいのですが。

• 変異を避けるために学ぶ必要があります。Fluxはデータの変更については何の意見もありませんが、Reduxは変更を好みません。Reduxを補完する多くのパッケージは、状態を変更しないことを前提としています。redux-immutable-state-invariantなどの開発専用パッケージを使用してこれを強制するか、Immutable.jsを使用するか、自分自身とチームが非変異コードを書くことを信頼することができますが、これはあなたが知っておく必要があることであり、これはあなたのチームによって受け入れられる意識的な決定であること。

• パッケージを慎重に選択する必要があります。フラックスは、明示的に「近く」などの問題解決しようとしませんが、アンドゥ/リドゥ、持続性、またはフォームを、Reduxのは、このようなミドルウェアや店舗エンハンサーなどの拡張ポイントを持っており、それが生み出した若者が、豊かな生態系を。これは、ほとんどのパッケージが新しいアイデアであり、まだ大量の使用を受け取っていないことを意味します。あなたは数ヶ月後に明らかに悪い考えになる何かに依存しているかもしれませんが、それはまだ言うのは難しいです。

• まだ、優れたFlow統合はありません。 Fluxは現在、 Redux がまだサポートしていない非常に印象的な静的型チェックを行うことができます。到着しますが、しばらく時間がかかります。

1つ目は初心者にとって最大のハードルであり、2つ目は熱狂的なアーリーアダプターにとって問題になる可能性があります。3つ目は私の個人的な不満です。それ以外は、Reduxを使用してもFluxが回避する特定の欠点はないと思います。一部の人々は、Fluxに比べていくつかの利点があるとさえ言っています。

Reduxを使用する利点についての私の回答も参照してください。

ReduxとFluxはどちらも、多くの一般的なパターン、特に非同期データフェッチを含むパターンをカバーするために、相当量のボイラープレートコードを必要とします。Reduxのドキュメントには、ボイラープレート削減の例がすでにいくつかあります：http : //redux.js.org/docs/recipes/ReducingBoilerplate.html。AltやFluxxorなどのFluxライブラリから必要なものをすべて入手できますが、Reduxは機能よりも自由を優先します。Reduxは不注意で無視される可能性のある状態について特定の仮定を行うため、これは一部の開発者にとってマイナス面になる可能性があります。

あなたが質問に本当に答える唯一の方法は、可能であれば、おそらく個人的なプロジェクトでReduxを試すことです。Reduxは、開発者のエクスペリエンスを向上させる必要があるために生まれ、関数型プログラミングに偏っています。レデューサーや関数構成などの関数の概念に慣れていない場合は、速度が遅くなる可能性がありますが、わずかです。これらのアイデアをデータフローに取り入れることの利点は、テストと予測が容易になることです。

免責事項：私はFlummox（人気のあるFlux実装）からReduxに移行しました。私のコードでは、魔法のほうがはるかに少ないことを好みます。マジックを少なくすると、定型文が少し増えますが、支払う金額は非常に小さくなります。

FluxとRedux。。。

ReduxはFluxの純粋な実装ではありませんが、Fluxにインスピレーションを得ています。最大の違いは、アプリケーションのすべての状態を含む状態オブジェクトをラップする単一のストアを使用することです。Fluxで行うようにストアを作成する代わりに、単一のオブジェクトの状態を変更するリデューサー関数を作成します。このオブジェクトは、アプリのすべての状態を表します。Reduxでは、現在のアクションと状態を取得し、新しい状態を返します。つまり、アクションはシーケンシャルであり、状態は不変です。それは私をReduxで最も明白な欠点に連れて行きます（私の意見では）。

なぜ不変性なのか？

その理由はいくつかあり
ます。1. コヒーレンス -ストアの状態は常にレデューサーによって変更されているため、誰が何を変更したかを簡単に追跡できます。
2. パフォーマンス -Reduxは不変であるため、以前の状態！==現在の状態かどうかを確認し、レンダリングする場合は確認するだけです。レンダリングを決定するために、毎回状態をループする必要はありません。
3. デバッグ - タイムトラベルデバッグやホットリロードなどの新しい素晴らしい概念。

UPDATE：それが十分に説得されていない場合は、見リー・バイロンについての優れた話不変ユーザーインターフェイス。

Reduxは、このアイデアを維持するために、コードベース/ライブラリを通じて開発者の規律を必要とします。ライブラリを選択し、変更不可能な方法でコードを記述することを確認する必要があります。

Fluxの概念のさまざまな実装（およびニーズに最適なもの）について詳しく知りたい場合は、この便利な比較を確認してください。

それを言った後、私はReduxがJSの将来の開発がどこに行くかを認めなければなりません（これらの行を書くことに関して）

他のFluxの選択肢に比べてReduxを使用する最大の利点の1つは、より機能的なアプローチに向けて思考を方向転換できることです。すべてのワイヤーがどのように接続されているかを理解すると、その驚くべき優雅さとシンプルなデザインに気づき、二度と戻ることはできません。

私が使って好みReduxのを、それは状態管理がはるかに簡単に比較します1つの店舗使用してフラックス、また再来のデベロッパーツールを、それはあなたがあなたには、いくつかの有用なデータをあなたの状態でやって何を見てみましょう本当に便利なツールだと、それは本当にインライン開発ツールに反応しますが。

また、Reduxは、Angularのような他の一般的なフレームワークを使用してより柔軟に使用できます。とにかく、Reduxがフレームワークとして自分自身を紹介する方法を見てみましょう。

Reduxには、Reduxを非常にうまく導入できる3つの原則があり、それらもReduxとFluxの主な違いです。

真実の単一の情報源

アプリケーション全体の状態は、単一のストア内のオブジェクトツリーに格納されます。

これにより、サーバーからの状態をシリアル化し、追加のコーディング作業なしでクライアントにハイドレイトできるため、ユニバーサルアプリを簡単に作成できます。単一の状態ツリーにより、アプリケーションのデバッグまたは検査も容易になります。また、開発サイクルを短縮するために、開発中のアプリの状態を維持することもできます。すべての状態が単一のツリーに格納されている場合、従来は実装が困難であった一部の機能（たとえば、元に戻す/やり直し）が突然簡単に実装される可能性があります。

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

状態は読み取り専用です

状態を変更する唯一の方法は、何が起こったかを説明するオブジェクトであるアクションを発行することです。

これにより、ビューもネットワークコールバックも状態に直接書き込まれることがなくなります。代わりに、彼らは国家を変える意図を表明します。すべての変更は一元化され、厳密な順序で1つずつ発生するため、注意が必要な微妙な競合状態はありません。アクションは単なるオブジェクトなので、ログに記録し、シリアル化して保存し、後でデバッグやテストのために再生できます。

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

変更は純粋な関数で行われます

アクションによる状態ツリーの変換方法を指定するには、純粋なレデューサーを記述します。

レデューサーは、前の状態とアクションを取り、次の状態を返す純粋な関数です。以前の状態を変更するのではなく、新しい状態オブジェクトを返すことを忘れないでください。1つのレデューサーから開始でき、アプリが大きくなるにつれて、状態ツリーの特定の部分を管理する小さなレデューサーに分割します。レデューサーは単なる関数であるため、呼び出される順序を制御したり、追加のデータを渡したり、改ページなどの一般的なタスクで再利用可能なレデューサーを作成したりすることもできます。

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)

詳細はこちらをご覧ください

Reduxは不変性に関する規律を必要とします。私がお勧めできるのは、偶発的な状態の変異についてお知らせするng-freezeです。

私の知る限り、reduxはフラックスに触発されています。フラックスはMVC（モデルビューコントローラー）のようなアーキテクチャです。facebookは、MVCを使用する際のスケーラビリティの問題によるフラックスを紹介しています。したがって、fluxは実装ではなく、単なる概念です。実際にreduxはフラックスの実装です。