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에 액세스 할 수있는 예외를 throw 어디 시나리오로 실행하고 그러나.

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로 평가됨).