비 인덱스 페이지에서 앱을 시작할 때 redux store를 준비하십시오.

Question

Simple SPA, 항목 목록, componentDidMount 일 때 API에서로드됩니다. 사용자가 목록의 항목을 클릭 할 때와 REDUX 저장

에 결과를 저장, 그것은 항목의 세부 정보 페이지로 이동 stateless component 패턴에 REDUX 저장소에서 세부 사항, container component에서 전통을 표시합니다.

모든 잘 작동하지만 한 가지 문제는, 때 사용자가 세부 정보 페이지 /item/:itemId에서 바로 웹 응용 프로그램을 엽니 다

1. 서버가 index.html
2. React router 다음 걸릴 것입니다 제어 및 경로 사용자를 반환합니다 URL이 일치하기 때문에 세부 정보 페이지로 이동하십시오.

이번에는 초기화 단계가 없어 store이 완전히 비어 있습니다.

이 용도로 사용하기 적합한 해결책은 무엇입니까?

나는 단순히 원하는 prop가 undefined 경우, 나는 초기화를 수행하는 API를 호출, componentDidMount에 props을 확인할 수 있다고 생각합니다.

stateless component 전에 redux store이 준비되지 않았다는 것을 알기 때문에 컨테이너 구성 요소에서이 단계를 수행 할 수있는 방법이 있습니다.

또는 list to detail은 웹 세계에서 이러한 패턴이 있다고 생각합니다.이를 처리하는 가장 좋은 방법이 있습니까?

Answer 1

한 번 비슷한 앱을 사용했습니다. 애플리케이션에서 상태를 가져 오는 대신, 반출 앱 초기화와 병행하여 인출 프로세스 + redux를 채우는 작업을 수행했습니다.

따라서 가져 오기를 시작하는 하나의 기본 Javascript 파일을 갖게됩니다. 완료되면 redux 저장소를 채 웁니다. 이것은 비동기입니다. 그래서 병렬로 당신은 반응 응용 프로그램을 시작할 수 있습니다

fetchData().then(fillReduxStore()); ReactDom.render()

은 그래서 앱이이해야 할 모든 라우팅과 일을 할 것입니다 반응하고 즉시 데이터가 존재하는 한, 응용 프로그램이 채워집니다.