web-dev-qa-db-ja.com

Reduxのオブジェクトは不変である必要があるのはなぜですか？

Reduxのオブジェクトは不変である必要があるのはなぜですか？ Angular2などの一部のフレームワークはonPushを使用し、不変性を利用してビューの状態を比較してレンダリングを高速化できることを知っていますが、Reduxがフレームワークに依存せず、使用するドキュメント内で言及している他の理由があるのではないかと考えています不変性（フレームワークに関係なく）。

フィードバックに感謝します。

javascriptangularreactjsreduximmutability
32
born2net

Reduxは、状態を（不変の）オブジェクトとして表す小さなライブラリです。 新しい状態純粋な関数を介して現在の状態を渡し、まったく新しいオブジェクト/アプリケーションの状態を作成します。

そこにあなたの目が艶をかけられていても心配しないでください。要約すると、Reduxはオブジェクトを変更することによるアプリケーションの状態の変化を表しません（オブジェクト指向のパラダイムの場合のように）。代わりに、状態の変化はdifference between入力オブジェクトと出力オブジェクト（var output = reducer(input)）として表されます。 inputまたはoutputのいずれかを変更すると、状態が無効になります。

別の言い方をすれば、Reduxはアプリケーションの状態を「凍結されたオブジェクトスナップショット」として表すため、不変性はReduxの要件です。これらのdiscrete snapshotsを使用すると、状態を保存したり、状態を逆にしたりできます。通常、すべての状態の変化に対してより多くの「アカウンティング」を行うことができます。

アプリの状態はonlyレデューサーと呼ばれる純粋な関数のカテゴリによって変更されます。レデューサーには2つの重要な特性があります。

  1. それらは変更しない、新しく構築されたオブジェクトを返します：これにより、入力+出力に関する推論が可能になります副作用なし
  2. 署名はalwaysfunction name(state, action) {}であるため、簡単に作成できます。

状態は次のようになっていると仮定します。

_    var theState = {
      _2ndLevel: {
        count: 0
      }
    }
_

カウントを増やしたいので、これらのレデューサーを作成します

_const INCR_2ND_LEVEL_COUNT = 'incr2NdLevelCount';

function _2ndlevel (state, action) {
    switch (action.type) {
        case INCR_2ND_LEVEL_COUNT:
            var newState = Objectd.assign({}, state);
            newState.count++
            return newState;
        }
    }

function topLevel (state, action) {
    switch (action.type) {
        case INCR_2ND_LEVEL_COUNT:
            return Objectd.assign({}, {_2ndLevel: _2ndlevel(state._2ndlevel)});
    }
}
_

Objectd.assign({}, ...)を使用してeachレデューサーでまったく新しいオブジェクトを作成することに注意してください。

Reduxをこれらのレデューサーに接続したと仮定すると、Reduxのイベントシステムを使用して状態変更をトリガーすると...

_    dispatch({type: INCR_2ND_LEVEL_COUNT})
_

... Reduxは以下を呼び出します。

_    theNewState = topLevel(theState, action);
_

注：actionはdispatch()からのものです

theNewStateは完全に新しいオブジェクトになりました。

注： ライブラリ （または 新しい言語機能 ）で不変性を強制するか、何も変更しないように注意してください：D

より詳細に見るために、ダン・アブラモフ（クリエイター）による このビデオ のチェックアウトを強くお勧めします。残っている質問に答えてください。

27
Ashley Coolman

次の 不変性の利点 はReduxのドキュメントに記載されています。

  • ReduxとReact-Reduxはどちらも 浅い等価性チェック を採用しています。特に：
  • 不変のデータ管理により、最終的にデータ処理がより安全になります。
  • タイムトラベルデバッグでは、リデューサーが副作用のない純粋な関数であることが必要であるため、異なる状態間で正しくジャンプできます。
9
Andrea Casaccia

すばらしい記事 https://medium.cobeisfresh.com/how-redux-can-make-you-a-better-developer-30a094d5e3ec

不変データに加えて、純粋関数は関数型プログラミングの中心概念の1つです。

0
zloctb