응용 프로그램 아키텍처의 질문. 페이지에 많은 구성 요소가 (look at the picture) (주간) 있다고 가정합니다. 주 아동용 구성 요소를 전환하는 것이 더 좋은 이유는 무엇입니까 (활성/비활성)? 페이지 (1, 2, 3, 다음)? 두 작업에 react-router를 사용할 수 있습니까? P .: 렌더링을 위해 ReactJS를 사용합니다.React, Redux, React-Router?
결과 필터링을 위해 반응 라우터를 사용하지 않을 것입니다. Redux를 사용하고 있기 때문에 감속기를 기본 섹션으로 분할하고 활성 상태/비활성 상태 및 섹션 당 현재 페이지를 모두 한 저장소에 보관할 수 있습니다.
나는이 페이지에서 react-router를 사용할 필요가 없다고 생각합니다.
그냥 아래처럼 감속기에 의해 (/ 활성, 1,2,3, 활성 다음되지 않음) 상태를 제어해야합니다
case NEXT_PAGE:
return {...state, list:[{active:0, ...others},{active:1, ...others},...], page: 1};
그리고 당신은 당신이에 표시 할 데이터를 얻을 수 있습니다 소품의 페이지.
mapStateToProps(state) {
return {
list: state.xxx.list,
currentPage: state.xxx.page
totalPage: state.xxx.total
}
}
키는 유스 케이스입니다. 당신은 다음과 같은 사용 사례가있는 경우 :
그럼 분명히 반응 라우터를 사용한다고 말할 수 있습니다. <Route path="main/:status/:page" component={Main}/>
그런 params 객체는 자신의 메인 구성 요소에 소품으로 주입 될 것이다 :
는이 같은 경로를 가질 수 있습니다.
사용자가 버튼을 클릭하면 반응 라우터의 push을 사용하여 경로를 변경하거나 Link을 반응 라우터에서 사용합니다. (redux로 디스패치 조치를 사용하거나 로컬 상태로 저장 한 경우 this.setState을 사용하는 대신).
위와 같은 사용 사례가 많은 이점이있는만큼 redux 또는 로컬 상태로 저장하는 것보다 어렵지 않다고 생각합니다.
견고하고 확장 가능한 응용 프로그램 아키텍처를 원하면 starterkit을 사용하는 것이 좋습니다.
좋은 스타터 키트의 위키는 선택한 디자인 원리를 설명합니다.
머리가없는 백엔드와 결합 할 때 가장 좋아하는 스타터 키트 중 하나는 React Redux starter kit입니다.
의존성 : 활성 일 때 각 하위 구성 요소에 고유 한 URL이 있어야합니까? 그렇다면 React Router가 원하는 것을 쉽게 할 수 있습니다. 그렇다면 부모 구성 요소의 상태를 사용하여 렌더링 할 자식을 결정하는 것이 좋습니다. –
재미있는 점은, 당신이 라틴어 동사를 변형하고 있었지만 말입니다./구약 –