Redux：親の前に小道具を受け取っている子

Question

私のアプリはuserオブジェクトを持っている場合と持たない場合があります。

が、私は二つの容器と二つの成分を持っている：

ParentContainer：

const mapStateToProps = (state) => ({ 
    showUserDetails: Boolean(state.user), 
}) 

export default connect(mapStateToProps)(ParentComponent) 

のparentComponent：

const ParentComponent = ({ showUserDetails }) => (
    <div> 
    {showUserDetails && <ChildContainer />} 
    </div> 
) 

ChildContainer：

const mapStateToProps = (state) => ({ 
    name: state.user.name, 
}) 

export default connect(mapStateToProps)(ChildComponent) 

ChildComponent：

const ChildComponent = ({ name }) => (
    <h1>{name}></h1> 
) 

、 state.user = nullを設定アクションの後、 ChildContainer ParentContainer前にレンダリングしようとしたので、それが null.nameにアクセスすることはできませんとして例外をスローどこ私はシナリオに実行していますが。

Reduxの期待された動作で、子コンテナが親の前に再レンダリングできるかどうか。古典的なリアクションフローでは、このエラーは起こりません。

コンテナを使用する代わりにをParentComponentに呼び出すことができます。しかし現実の世界では、コンポーネントを深く入れ子にして、さまざまな国のさまざまな部分にアクセスしているので、簡単に小道具を渡すことはできません。

Answer 1

Reduxディスパッチをバッチ処理していますか？ V3.0.0リリースを読んでいない場合は、慎重にノート：

https://github.com/reactjs/react-redux/releases/tag/v3.0.0

それはredux-batched-updatesモジュールを提案しているが、それはこのようにそれを使用し、多かれ少なかれredux-batched-subscribe

の賛成で廃止予定です。

import { unstable_batchedUpdates as batchedUpdates } from 'react-dom'; 
import { batchedSubscribe } from 'redux-batched-subscribe'; 

const store = createStore(reducer, intialState, batchedSubscribe(batchedUpdates)); 

Answer 2

更新は、親コンポーネントに含まれているかどうかに関係なく行われます。更新時にはDOM内にあるため、connectはコンポーネントを更新しようとします。

ユーザーの名前（state.user.name,）を引っ張るときに安全チェックを挿入し、それを（state.user && state.user.name,）に置き換えるのが最も簡単な回避策です。

もちろん、代替方法もあります。それを親から渡します。

さらに説明すると、親から送信された小道具は親で最初に評価され、更新は階層ツリーで下向きに伝播します。しかし、あなたの小道具nameは実際に状態ツリーから直接来ているので、その周りにいくつかの安全チェックが必要です。

それ以降の更新後に親が子をレンダリングしないようにしても（showUserDetailsはfalseに評価されるため）