한 페이지를로드하는 많은 API 요청에 따라 상당히 복잡한 앱으로 redux +를 구현하는 데 더 많은 시간이 소요됨에 따라 단일 컨테이너 구성 요소를 포함하는 것이 더 나은지 여부를 결정하는 데 문제가 있습니다. 모든 비동기 물건을 처리하고 벙어리 구성 요소로 소품을 전달하는 페이지, 필요로하는 데이터에만 관심을 갖고 필요한 데이터를 가져 오는 여러 컨테이너 구성 요소가 있습니다. 내가 앞뒤로 두 패턴 사이 사라하고 각각의 장점/단점이 있음을 발견했습니다리액턴스 Redux : 추가 컨테이너 v.s. 적은 컨테이너
- 프로 : 나는 상단에 하나의 컨테이너 요소 넣으면
을 모든
isFetching소품 및fetchSomeDependency()작업을 한 곳에서 처리 할 수 있습니다. - con : 정말 안좋은 단점은 여러 구성 요소를 통해 소품과 콜백을 전달해야한다는 것입니다. 트리 중간에있는 특정 구성 요소가이 부분에 묶여 있습니다. 여기
을 보여줍니다 문제를 시각적으로 예입니다 관계에 필요한 소품이 많다는 :
당신이 볼 수 있듯이,<MyModal /> 및
<MyModalContent /> 지금과는 아무 상관이없는 소품에 관심을해야
<MyContainer
data={this.props.data}
isFetchingData={this.props.isFetchingData}
fetchData={this.props.fetchData}
>
{!isFetchingData &&
<MyModal
someData={props.data}
fetchData={props.fetchData}
>
<MyModalContent
someData={props.data}
fetchData={props.fetchData}
>
<SomethingThatDependsOnData someData={props.someData} />
<SomeButtonThatFetchesData onClick={props.fetchData} />
</MyModalContent>
</MyModal>
}
</MyContainer>
그것은 모달로 보는 것은 재사용 될 수 있어야하고 오직 모달의 문체 적 자질에만 관심을 가져야한다.
처음에는 위의 것처럼 보였지만 일단 100 개가 넘는 구성 요소를 사용하게되면 모든 구성 요소가 매우 복잡하게 느껴지고 이러한 최상위 컨테이너 구성 요소의 복잡성이 너무 좋아서 너무 많아서 대부분의 것으로 보지 못했습니다. 내가 작업하고있는 앱에서) 3 개 이상의 API 요청에 대한 응답에 의존합니다.
이- 프로 :가 완전히 소품을 전달하는 필요성을 제거 그런 다음 여러 개의 컨테이너를 사용하기로 결정했습니다. 그것은 어떤 경우에는 그것을하는 것이 여전히 이치에 맞지만, 훨씬 더 유연합니다.
- 프로 : 리팩터링하기 쉬운 방법. 나는 두드러지게 움직이고 리팩토링하는 구성 요소가 무엇이든 파손될 수 있다는 것에 놀랐습니다. 반면에 다른 패턴에서는 많은 것들이 무너졌습니다.
- pro : 각 컨테이너 구성 요소의 복잡성은 훨씬 적습니다. . 비동기 물건에 따라 모든 구성 요소는 항상 자체
isFetching상태를 처리 할 필요가 : 내mapStateToProps및mapDispatchToProps은에 - 죄수의 구성 요소의 목적에 더 구체적이다. 이는 단일 컨테이너 구성 요소에서 처리되는 패턴에서 필요하지 않은 복잡성을 추가합니다.
그래서 주요 딜레마는 내가 하나의 컨테이너를 사용하는 경우, 내가 루트 컨테이너와 잎 구성 요소 사이의 부품이 취소 필요한 복잡성을 얻을 수 있다는 것입니다. 여러 컨테이너을 사용하는 경우 리프 구성 요소가 더 복잡해지고 단추가 걱정되지 않아도 isFetching에 대해 걱정할 필요가있는 단추가 생깁니다.
누구나 죄수를 피할 수있는 방법을 찾았습니까? 그렇다면이를 피하기 위해 따르는 "엄지 손가락 규칙"은 무엇입니까?
감사합니다.
가 읽을 수있는 솔루션을 게시하시기 바랍니다 :
은이 문서를 참조하십시오. – Sachith