2016-07-29 3 views
0

구성 요소가 렌더링되기 전에 작업을 디스패치하고 싶습니다. 하지만 액션은 redux-saga와 통합 된 비동기 액션입니다.렌더링 전에 Redux 디스패치

비동기 작업이 완료되면이를 완료해야하며 구성 요소를 렌더링해야합니다. 이 작업을 수행하려면 각 컨테이너마다 고유 한 ID가 있으며 작업 완료 후 {loaded : true} 특성이 상점에 저장됩니다.

나는 기능 (클라이언트 측) 또는 componenDidMount (서버 측) componenWillMount에 지정된 작업이 트리거이 방법

@preload('uniqueId', (dispatch) => new Promise((resolve, reject) => { 
    dispatch(MyAction(resolve, reject)); 
}) 
@connect(....) 
class MyComponent extends React.Component { 
    .... 
} 

@preload이다 생각하고 때 액션 호출 resolve()state.preloadState.uniqueId.loaded 설정합니다 ~ true. 또한 state.preloadState.uniqueId.loaded === true 일 때 구성 요소 만 렌더링하도록 구성 요소를 래핑합니다.

@connect 나는 지정된 동작으로 redux 저장소에 미리로드하려는 데이터를 연결합니다.

redux, redux-saga 앱 및 서버 측 렌더링에 대한 데이터 미리로드를 수행하는 것이 일반적인 방법인지 궁금합니다 (이전에는 redux-async-connect를 사용했지만 모든 중첩 구성 요소를 사용 가능하게 만들려고합니다. 데이터 미리로드 그래서 일부 정적 함수 대신 componentWillMount 바인딩 할).

답변

1

예, 실제로 부모가 렌더링하지 않고 렌더링을 중단 할 수는 없지만 조건부로 렌더링 할 수는 없습니다. 다음과 같음 :

render() { 
    if (!state.data) { return null; } 
    return <div>{state.data}</div> 
}