Redux 액션이 두 번째 것을 파견 할 때까지 기다려주십시오.

Question

안녕하세요. 제 질문을 미리 읽어 주셔서 감사합니다.

나는 라우터 v3과 Redux가있는 React 앱 (버전 16)을 만들고있다.

<Route path="/" component={BakeryComponent}> 
    <IndexRoute component={LandingComponent}/> 
    <Route path="employees" component={EmployeesComponent}/> 
    <Route path="clients" component={ClientComponent}/> 
</Route> 

그래서 우리는 다른 기관처럼이 :

응용 프로그램은 다음과 비슷한 구조를 가지고있다. 주요 베이커리인데, 선택된 베이커리와 베이커리에 의존하는 고객에 의존하는 직원.

앱에 액세스하면 이름, 직원 수 및 기타와 같은 베이커리의 기본 정보 (기본적으로 선택되어 있음)를 보여주는 방문 페이지에 착륙합니다. 이 모든 정보는 백엔드에서 비롯되며 Bakery 또는 Landing 구성 요소의 componentDidMount에서 검색됩니다 (이 시점에서 아무런 차이가 없습니다).

사용자가 방문 페이지에있을 때 직원 또는 클라이언트보기로 이동할 수 있습니다. 그런 일이 발생하면 구성 요소가 탑재되고 직원 구성 요소라고 가정 해 보겠습니다. 구성 요소의 componentDidMount 메서드에서 필요한 정보 (이 경우 직원 목록)를 검색합니다.

지금까지 모든 것이 제대로 작동합니다.

이제 사용자가 페이지를 새로 고치면 모든 것이 여전히 작동해야하지만 요구 사항은 아닙니다. 문제는 BakeryComponent와 EmployeesComponent (둘 다)가 다시 마운트되면 새로운 백엔드 호출이 (병렬로) 트리거되도록하는 것입니다. 그러나 직원들에 대한 백엔드 호출은 우리가 원하는 빵집의 직원을 알아야하기 때문에 먼저 해결해야하는 베이커리에 달려 있습니다. 그래서 우리는 그 시점에서 오류가 발생합니다.

제과점이 이미 해결 된 경우 (getState 사용) 호출 된 조치 (직원을 검색하는 조치)를 확인하고 그렇지 않은 경우 해결 될 때까지 기다렸습니다. 하지만 그것은 나에게 확신하지 못한다. 해킹 같은 것처럼 보인다. React/Redux가 이미이 문제를 해결할 수있는 도구가 있어야한다는 생각이 들지만 나는 그 사실을 모릅니다. 내가 맞습니까?

도움이 될 것입니다.

감사합니다.

Answer 1

실제로 멋진 해결책은 아니지만 나는 당신을위한 방법을 생각할 수 있습니다. LandingComponent에서 dispatch를 호출하기 전에 BakeryComponent의 데이터 준비 여부를 확인할 수 있습니다. 이런 식으로 뭔가 :

BakeryComponent이 밖으로

componentDidMount() { 
    // after this one finish we may have something in the store like: state.bakery.loaded = true 
    dispatch(loadBakery()) 
} 

LandingComponent

// Landing component should connect to state.bakery.loaded to get updated data 
componentDidMount() { 
    initData() 
} 

componentDidUpdate(){ 
    initData() 
} 

initData() { 
    // check if bakery loaded and landing data is not loaded 
    if (state.bakery.loaded && !state.landing.loaded) { 
    // this should load data and set the state.landing.loaded to true 
    dispatch(loadLanding()) 
    } 
}