부모에서 saga가 완료 될 때까지 하위 구성 요소 렌더링 지연 종속 구성 요소

Question

<Provider store={this.props.store}> 
    <ConnectedRouter history={this.props.history}> 
    <AppWrap> 
     <Header /> 
     <Main> 
     <Switch> 
      <Route exact path="/" component={Component1}/> 
      <Route path="/component2" component={Component2}/> 
     </Switch> 
     </Main> 
    </AppWrap> 
    </ConnectedRouter> 
</Provider> 

내부 App.componentWillMount에서 Redux 작업 this.props.requestApplesApiData이 트리거됩니다. 이는 사가 (apache)에서 데이터를 가져오고 감속기가 redux 상태에 추가 한 페이로드가있는 receiveApplesApiData 액션을 반환합니다.

componentWillMount(){ 
    // triggers an action 
    // which is picked up by a saga, 
    // which is handled by the reducer 
    // which updates the redux state 
    this.props.requestApplesApiData(); 
} 

내가 (. REDUX 연장 승) 크롬 개발 도구에 검사 할 때

돌아 오는 상태는 괜찮 업데이트됩니다,하지만 난 REDUX 상태 (최근에 가져온 "사과"포함)으로 업데이트되지 않은 것으로 나타났습니다 Component2에서 경쟁 조건이 획득되는 동안, Component2에서 "apples"를 표시 할 수 없다는 것을 의미합니다. 즉, 렌더링 기능을 수행 할 당시 존재하지 않았기 때문입니다.

구조가 중첩 된 구조 인 경우 재 렌더링이 일반적으로 자동으로 수행되지만 "사과"는 redux 저장소의 자체 루트 개체에 있습니다.

어떻게하면 App1이 필요한 데이터를 가져올 지 Component1과 Component2가 기다릴 수 있습니까? 또는 다른 말로하면, 데이터가 희박해질 때까지 어떻게 App에서 렌더링 기능을 지연/연기 할 수 있습니까?

Answer 1

두 가지 옵션 :

• 는 조건부 특정 값이 값 이전
• 디스플레이 뭔가 중간이 돌아 오는 저장소에 업데이트됩니다
저장소에 존재하는지 여부에 따라 구성 요소를 렌더링

니어 여기에 주요 이슈처럼 들리지만, 저장소의 변경을 기반으로 업데이트 할 구성 요소를 얻고 있습니다.

일반적인 경로는 해당 구성 요소가 업데이트 될 때 구성 요소가 업데이트된다는 것입니다. 무대가 완료되면 redux 저장소의 일부 값이 업데이트됩니다. 구성 요소에는 저장소를 감시하고 저장소에서 해당 소품을 업데이트하는 것이 있어야합니다. 이것이 React에게 이러한 구성 요소를 다시 렌더링하도록 알려주는 것입니다. 일반적인 규칙은 이러한 모든 업데이트를 mapStateToProps 함수에 저장하는 것입니다.

귀하의 예는 상당히 아래로 제거한다, 그래서 당신이 여기에 사용하지만,하고 REDUX 기능 내장이 compnent 업데이트 소품을 전달하는 방법을 설명하는 문서 얼마나 많은 모르겠어요 : https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

가

docs에서 요약 : connect()으로 저장소에 구성 요소를 연결하고 첫 번째 매개 변수는 구성 요소가 저장소에서 해당 소품을 업데이트하는 방법을 지정하는 함수 여야합니다.