2016-05-30 7 views
12

私はReduxには新しく、単方向データをより洗練されたものにするために関数型プログラミングを使用するという大きなイメージを実際に得ようとしています。Redux:なぜそれを使用することのような突然変異を避けるのですか?

各レデューサーは古い状態を取っており、古い状態を変更せずに新しい状態を作成してから、新しい状態を次のレデューサーに渡して同じことを行います。

私はそれが副作用を引き起こさないということは、単方向のデータフローの利点を得るのに役立ちます。

私は本当に古い状態を変更しないことについて非常に重要であるものは得られません。

私が考えることのできる唯一のことは、あなたが各州を握っていれば、実行して元に戻すことができたからかもしれないからです。

質問:

たちは各ステップで古い状態を変異させたくない他の理由がありますか?

答えて

16

不変のデータ構造を使用すると、正しく実行された場合、パフォーマンスが向上します。 Reactの場合、データが変更されなかった場合、パフォーマンスはしばしばアプリの不必要な再レンダリングを避けることです。

これを達成するには、アプリの次の状態を現在の状態と比較する必要があります。状態が異なる場合は再レンダリングします。それ以外はしないでください。

状態を比較するには、状態のオブジェクトを比較する必要があります。普通の古いJavaScriptオブジェクトでは、オブジェクト内のプロパティが変更されているかどうかを確認するために、深く比較する必要があります。

不変オブジェクトの場合は、その必要はありません。

immutableObject1 === immutableObject2 

は基本的にトリックです。または、Immutable.js Immutable.is(obj1, obj2)のようなライブラリを使用している場合。

反応に関しては、PureRenderMixinのようにshouldComponentUpdateメソッドで使用できます。状態が変化しなかったとき

shouldComponentUpdate(nextProps, nextState) { 
    return nextState !== this.state; 
} 

この関数は、再レンダリングを防ぐことができます。

私は、不変オブジェクトの背後にある推論に貢献したいと考えています。

+0

これまでのところ、これは質問の中核としての最良の答えです。私が言ったように - 「副作用を引き起こさないようにすることで、一方向のデータフローの利点を得るのに役立ちます。**私は、本当に古い状態を変更しないことについては何も重要ではありません。**」 –

+1

なぜですかこれは受け入れられた答えではありませんか?要するに、オブジェクトを変更すると、次の比較はできません。immutableObject1 === immutableObject2。代わりに、オブジェクト内のプロパティが変更されているかどうかを確認するために、深い比較を実行する必要があります。 – Antoni4

4

私はRedux(とReact.js)もかなり新しくなっていますが、これは私がこのことを学ぶことから理解できるものです。

可変状態よりも不変状態が選択される理由はいくつかあります。 まず、突然変異の追跡は非常に困難です。たとえば、変数をいくつかのコードで使用していて、この場所のそれぞれで変数を変更できる場合は、それぞれの変更を処理し、突然変異の結果を同期させる必要があります。 これは、多くの場合、双方向データフローにつながります。データの断片は、関数、変数などを横切って上下に流れています。コードはif-elseによって汚染され始め、状態の変更を処理する責任はありません。 一部の非同期呼び出しを追加すると、状態の変更を追跡するのがさらに難しくなる可能性があります。 もちろん、データイベント(例えばObject.observe)を購読することはできますが、変更を逃したアプリケーションの一部がプログラムの他の部分と同期しないことがあります。

不変状態は、すべての変更を処理するのに役立つ単方向データフローを実装するのに役立ちます。まず第一に、データは上から下に流れます。つまり、メインモデルに適用されたすべての変更が下位コンポーネントにプッシュされます。コード内の1つの場所、つまりレジューサーからしか変更できないため、アプリケーションのすべての場所で状態が常に同じであることが常に確認できます。 言及する価値のあるものもあります。複数のコンポーネントでデータを再利用できます。状態を変更することはできません(新しいものを作成することができます)ので、同じ場所で複数のデータを使用することはかなり安全です。

あなたがここに(そしてそれは再来の主なアプローチとして選ばれた理由について)可変性の長所と短所についての詳細な情報を見つけることができます。

0

理由はありません。 shouldComponentUpdate "純粋なレンダリング"最適化が可変状態のコンテナで動作できない根本的な理由はありません。このライブラリは、例えばそれを行います。不変のデータと

https://github.com/Volicon/NestedReact

データ構造自体への参照は、バージョントークンとして使用することができます。したがって、参照を比較すると、バージョンを比較しています。

変更可能なデータを使用すると、手動で行うのは難しいがスマートな「観測可能な」オブジェクトで簡単に達成できる別々のバージョントークンを導入(比較)する必要があります。

3

Reduxは、2つのオブジェクトのメモリ位置を比較して古いオブジェクトが新しいオブジェクトと同じかどうかをチェックします。レデューサー内で古いオブジェクトのプロパティを変更した場合、「新しい状態」と「古い状態」は同じオブジェクトを指し示し、Reduxは何も変更されていないことを推測します。

0

「突然変異のない」マントラの鍵は、です。オブジェクトを突然変異させることができない場合は、元のオブジェクトのプロパティと新しいオブジェクトのプロパティを追加して新しいものを作成する必要があります。オブジェクトのプロパティが変更されていない場合は、異なる場合は、アクションがディスパッチされたときにコンポーネントをアップデートするには、Reduxのは、そう、チェック:あなたは新しいオブジェクトを作成場合

  • は、Reduxのは、オブジェクトではないことがわかります同じですので、それはコンポーネントの更新をトリガします。
  • が既にストアにあるオブジェクト(たとえば、プロパティの追加または変更)をに変更した場合は、は表示されないため、コンポーネントは更新されません。
関連する問題