web-dev-qa-db-ja.com

反応ベースのアプリケーションを使用する際のリデュースと逆流の中心的な違いは何ですか？

最近、私はEコマースサイトの開発に関する予備調査を行い、 redux と reflux の両方がFacebookの flux architecture に由来し、両方が人気があります。この2つの違いについて混乱しています。

Reduxと逆流をいつ使用する必要があり、eコマースWebアプリケーションの開発段階で最も柔軟なのはどれですか？

reactjsreduxsoftware-designfluxrefluxjs
32
Zahid Rahman

RefluxとReduxの具体的な違いに焦点を当てた別の答えを書きたいと思いました。 @Mijamoは、それらが異なるものとして生まれた理由の核心になり、コンテキストがある場合は非常に良い要約ですが、開発の観点から2つの違いを具体的に知るためにこの質問に行きました。私がちょうど入って、すべてのものを読んだ方法として見て、私は答えを書きたかった。この回答をより多くのコード例で更新します。

フラックス（概要）

これに進む前に、現在のFluxと、現在管理しなければならない多くのコンポーネントまたは状態の異なる部分を持つアプリケーションのスケーリングを現在どのように処理するかについて考えることを心に留めておく必要があると思います。これはかなり良いです talk at React NYC：Scaling Flux それは問題に入り、彼らが到達する解決策はRefluxとReduxが許すものからそれほど遠くありません簡単に言えば、「」という大きな質問です。すべてのコンポーネントが留意する必要のある共有状態を持つコンポーネントがある場合はどうすればよいでしょうか。それは？」最終的にこれらのフレームワークの多くが到達する答えは、グローバルな状態のこのアイデアが必要であるということです。 。

Fluxの比較を参照する必要があるため、次の図で Fluxの動作の概要 を表示したいだけです。

enter image description here

還流

Refluxにはディスパッチャがなく、Viewコンポーネントはアクションを介してコンポーネントを介して直接通信します。

+---------+       +--------+       +-----------------+
¦ Actions ¦------>¦ Stores ¦------>¦ View Components ¦
+---------+       +--------+       +-----------------+
     ^                                      ¦
     +--------------------------------------+

Fluxとの差別化に関しては、それほど多くはありません。独自のアクションを作成し、独自のストアを作成し、ストアでアクションをリッスンします。最大の違いは、Viewコンポーネントがディスパッチャを経由するのではなく、ストアに直接アクションを送信するために、コンポーネントにはReflux.Component のではなく React.Componentを使用すると、ストアに直接フックすることができます。つまり、この例

class MyComponent extends Reflux.Component
{
    constructor(props)
    {
        super(props);
        this.state = {}; // our store will add its own state to the component's
        this.store = StatusStore; // <- just assign the store class itself
    }

    render()
    {
        var flag = this.state.flag; // <- flag is mixed in from the StatusStore
        return <div>User is {flag}</div>
    }
}

また、複数のストアにフックする機能もあります（配列を受け取るstoresと呼ばれる小道具があります。Refluxには、編集方法mapStoreToStateが付属しています。ストアは状態をコンポーネントに渡します。

当然、Refluxに同梱されているコンポーネントを使用しているため、おそらく Reflux Componentのドキュメント と、これを念頭に置いてコンポーネントを適切に作成する方法をお読みください。

最後に私が注意することは、大きな問題はグローバルな状態であり、これにどう対処するかということです。逆流には Reflux.GlobalState これは、ストアでIDを設定する限り貢献できます。上記のリンクはより詳細に説明していますが、これにより、Reflux.GlobalState.[StoreID].[property]ここで、StoreIDはストアに割り当てるIDであり、propertyはアクセスしたい実際の状態です。

Redux

Reduxはそれ自体で多くのことを変更し、ディスパッチャのアイデアも殺します。深く掘り下げる前に、ドキュメントで言及されている つの原則 を強調したいと思います。

  1. 単一の真実の源
  2. 状態は読み取り専用です
  3. 変更は純粋な関数で行われます

Reduxでは、実際に対処する必要があるグローバル状態は1つだけであり、それはアプリケーションのグローバル状態です（大きな問題に対処します）。アクションとストアはまだありますが、ストア自体はグローバルステートツリーで自身の状態を追跡するだけで、アクションをディスパッチして状態ツリーを変更し、状態にアクセスできるようにします。 subscribeを介してこれらのストアにリスナーを配置することもできます。

この大きな動機は、最初の2つの原則にあります。 FluxまたはRefluxでも、必要に応じて状態を変更しないようにしたい場合（技術的にはいつでもストアの状態にアクセスして変更できるため）、次のようなことに依存します- ImmutableJS 誤って状態を変更していないことを確認します。一方、Reduxを使用すると、ストア/セレクターを介してのみ状態にアクセスでき、ディスパッチアクションを介してのみ変更を加えることができます（3番目の原則）。

注意すべき興味深い点は、RefluxとFluxがストアでリッスンし、どの状態変更を行うかを決定するアクションを持っているのに対して、Reduxのストアは単に必要なペイロードを含むメッセージをディスパッチし、それが巨大なswitchステートメントを通過することです状態ツリーで何をすべきかを判断する-これはreducerと呼ばれるものです。これは、Fluxがストアにreduceを持っている方法と何の違いもありませんが、Reduxはこの概念を独自のものとしてリッピングし、グローバル状態ツリーはrootReducerを通過します（ReduxにはNice関数が付属していますcombineReducersを作成してrootReducerを作成します）。それについて考える良い方法は、巨大な状態ツリーに変更をディスパッチし、その後、あなたが望むどんな変更でも、それはあなたが望む最終状態に縮小または凝縮されます。これは実際にreduxが多くのことを設定する方法に影響を与えるため、React再レンダリングの方法を指定します（ReactでReduxを使用している場合））。

Reduxの データフロー は、上記のリンクで非常によく説明しましたが、添付したかなり良いインフォグラフィックもあります

enter image description here

コアの違いは本当に

  • Reduxには状態管理に対するまったく異なるアプローチがあります-グローバルな状態があり、必然的に変更を行いたい場合は、そこでのみ発生するという考えを取り入れています非常に具体的な方法（どのコンポーネントがどの状態にアクセスできるかをどのように扱うかはあなた次第です）。
  • Refluxは、Fluxの本来の内容をあまり変更することなく、コンポーネントが複数のストアにアクセスできるようにすることを実際にサポートしようとします（Refluxと思いますFluxは本来あるべきものです）。
  • Reduxは状態ツリーの管理方法とストアに異なる責任を与える方法を実際に変更し、状態情報がコンポーネントにマッピングされる方法を変更しますが、Refluxは単純に仲介者を切り取り、コンポーネントが必要なストアにアクセスできるようにします。

うまくいけば、これがそれらの間の核となる違いについてより多くの洞察を与えてくれるでしょう。

28
aug

Flux、Reflux、およびRedux（および他の多くの同様のライブラリ）はすべて、横断データ管理を処理するための異なる方法です。

基本的なReactコンポーネントは父子関係で正常に動作しますが、直接接続されていないアプリのさまざまな部分からデータを提供および更新する必要がある場合、すぐに乱雑になる可能性があります。そのようなデータを維持および更新するためのアクション（およびその他のメカニズム）。

FluxはFacebookによって開発されたオリジナルのソリューションで（Reactと同様）、強力ですが、おそらく最も簡単でも読みやすいものでもありません。逆流は、部分的に簡単かつ明確にするために開発されました。主な違いは、Refluxではすべてのデータに独自のストアとアクションがあり、非常に読みやすく、簡単に記述できることです。残念ながら、Refluxはあまり積極的に開発されていないので、著者はメンテナーを探しています。しかし、全体として、RefluxはFluxのよりエレガントな代替品であると言えます。

Reduxはもう1つのソリューションであり、これまでのところ最も人気があります。その利点は、ネストされたストアに不変のコンテンツを提供するため、前/次の機能を簡単に実装し、ストアの多くの部分に影響を与える横断アクションを実行できることです。 reduxの欠点は、かなり冗長であり、FluxまたはRefluxよりも多くの概念があることです。同じ基本的なアクションの場合、より多くのコードが必要になり、非同期実装は最もクリーンではありません。それは決定的に強力でスケーラブルです。

これについてさらに詳しく説明しているリンクを次に示します。 http://jamesknelson.com/which-flux-implementation-should-i-use-with-react/

55
Mijamo