클로저를 사용하여 React 구성 요소의 상태 캡슐화

Question

구성 요소 계층에서 서로 매우 멀리 떨어져있는 두 요소간에 데이터를 전달할 때 데이터를 소품으로 전달하는 것은 지루할 수 있습니다. 이 유스 케이스에서는 많은 양의 구성 요소가있을 때 추적하는 것이 적기 때문에 Redux를 사용했습니다.

작은 프로젝트에서 한 것은 클로저를 사용하여 상태를 캡슐화하고 해당 변수를 내보내고 다른 곳에서 소비하는 것입니다. 나는 이것이 반 패턴이라고 생각하지만 효과가있다.

작동 방식은 구성 요소 내에서 수정 될 변수를 선언하는 것입니다. 이 동일한 변수는 다른 곳에서 가져오고 다른 곳에서 소비됩니다. 여기

내가 (그냥 큰 구성 요소 계층 구조가 척) 뭐하는 거지와 작은 샘플입니다 : https://codesandbox.io/s/2R9RvYkN1

그래서 내 질문은 다음과 같은 결과를 얻을 수있는 더 나은 방법이 있나요? 이러한 유스 케이스에 대해 Flux 구현을 사용해야합니까? 큰 구성 요소 계층을 통해 소품을 전달하는 것이 좋습니까?

Answer 1

당신이 말했듯이, redux는 앱에 전역 인 "앱 상태"를 제공함으로써이 문제를 해결합니다.이 상태에서 원하는 모든 구성 요소를 연결할 수 있습니다.

"클로저"는 가난한 사람의 Redux 일뿐 아니라 글로벌 상태이므로 Redux에서 제공하는 기능 중 일부가 부족합니다 (특별히 작성하지 않은 경우).

CompA에서 CompB의 클릭 이벤트를 기반으로 다시 렌더링해야합니다. 자동 종료 기능을 사용하면 어떻게 자동으로 수행합니까? 리스너를 추가하고 관련 상태가 변경되었는지 확인한 다음 다시 렌더링해야합니다.

이러한 모든 작업은 Redux에서 무료로 수행되므로 추가 혜택이 표시되지 않습니다 (redux를 사용하지 않는 경우는 제외).

redux를 사용하지 않는 것이 중요하다면, 이것은 "훌륭합니다", 그러나 매우 위험 할 수 있으며, 확장이 잘되지 않을 것이라고 말하고 싶습니다.