2017-07-06 11 views
1

stateが不変の場合、状態の全体を変更する必要はありませんか?それ以外の場合は、その状態を突然変異させます。トップレベルキーは別個の不変オブジェクトとして保持されていますか?状態が不変の場合は、状態が変化したときに状態全体が置換されますか?

定義によって、すべてのものを交換する必要はありませんか?これはReduxによってどのように処理されますか?フル状態のブレークPureComponentsを置き換えませんか?

ありがとうございます。

+0

まあ、状態は、不変ですが、還元剤の状態スライスだけで置き換えられます。レデューサーは店舗全体を再現しません*、次の状態を計算するときはそれだけのスライスです。 – Li357

答えて

1

ステップバイステップでそれを打破するのをしてみましょう:

  1. {色:「赤」}の初期Reduxの店があり、ユーザーがボタン
  2. をクリックしたアクションが生成され
  3. は、CHANGE_COLORを言います
  4. Reduxは、(ステップ1の)店舗とあなたのレデューサーを呼びます。さんはredux-reactの実行時に店の変化、ということである今、何が起こる

    (store) => { color: store.color }としてあなたがmapStateToPropsclass Square extends PureComponentを持っていたとしましょう、そして、

:減速が新店舗を返し、{「青」の色を}言います毎回mapStateToProps。その後、新しい小道具を生成します。これらの小道具は反応するように送られる。

あなたが今まで私と一緒にいるのであれば、還元と反応の仕組みのDRは、reduxストアが変わるたびにmapStateToPropsが1つずつ実行され、反応コンポーネントの新しい小道具が生成されます。

この時点から、それは標準のReactです。 Reactコンポーネントの小道具が変更されると、componentWillReceivePropsが実行され、続いてshouldComponentUpdateが実行されます。

PureComponentの場合、基本的にshouldComponentUpdateは新しい小道具の浅い等価チェックを行い、そこから行くことを意味します。


いいえ、この基本的な理解で、ネストしたオブジェクトも同様に動作します。より良いツールがにあること

const reducer = (store, action) => { 
    if (action == CHANGE_COLOR) { 
    let newStore = Object.assign({}, store); 
    newStore.allMyData = Object.assign({}, newStore.allMyData, { color: 'blue' }); 

    } 
} 

注:

{ 
    allMyData: { 
    color: 'red' 
    key1: 'someData', 
    key2: 'lotsMoreData', 
    bigData: { 
    nestedKey: 'EvenMoreNestedData', 
    } 

} 

次に、あなたの減速は、次のようになります。私たちはこのような店があったら何をする代わりに{color: 'red'}の店舗の

深い不変のマージを行う。私がここに示したい1つのポイントは、newStoreは別のオブジェクトですが、storenewStore BOTHはを指しています。 キーとそれ以外の値は変更されていません。不変部分は、このようなことを可能にします。

この後、手順は基本的に同じです。各店舗の変更後、mapStateToPropsが実行され、新しい小道具オブジェクトが生成されます。Redux-reactはその新しいプロットオブジェクトをReactに渡します。この場合、小道具の値が同じID(===)の場合、PureComponentはレンダリングされません。

redux-reactはいくつかの最適化を行います新しい小道具と反応するよう呼びかけますが、この議論の目的のために、私はそのステップを省略しています。

これは、あなたの質問をクリアするのに役立ちます。

TL; DR:すべてのreduxアクションが新しいストアを返します。新しいストアが生成されるたびに、mapStateToPropsは反応コンポーネントごとに新しい小道具を生成します。反応コンポーネントがpureComponentの場合、プロップは変更されていないため再描画されません。

あなたのお店が不変なので、別の店舗で同じ内側のオブジェクトを再利用することができます。さらにをmapStateToProps経由で反応コンポーネントに渡すこともできます。

+0

これは役に立ちましたか?答えをアップアップして、それを正しくマークすることを検討してください:-) @Yeah – AnilRedshift

+0

私はupvoteしようとしましたが、私のアカウントが新しいので、できませんでした。 アクション/レデューサーが 'foo.bar'を更新し、接続されたコンポーネント' mapStateToProps'が '(store)=> {foo:store.foo}'だった場合はreduxで、 'foo = {foo } 'をPureComponentの子に追加します。子供は 'foo.bar'が変更されたときに再レンダリングしませんでした。だからこそ彼らは物事をできるだけ平らにすることを勧めているのです。ありがとうございました – Yeah

0

Reduxは状態が不変であるとは決して言いません。アプリケーションのストアまたは状態を構成する減速器は不変でなければならず、純粋な機能でなければならないと述べています。
はいトップレベルのキーは、別個に不変であるとみなされます。
どのような変更やReduxの言い回しでも、何らかのアクションが実行されると、状態の変化を引き起こす各アクションでリデューサーがトリガーされます。

関連する問題