Redux를 사용하여 상위 - 하위 상황에서 웹 구성 요소의 공유 컨텍스트를 만드는 좋은 방법은 무엇입니까?

Question

React와 함께 Redux를 사용할 때 우리는 내부적으로 React의 context API를 사용하는 react-redux를 사용하여 연결로 생성 된 모든 HoC에 상점을 제공 할 수 있습니다.

응용 프로그램을 작성하는 데 웹 구성 요소를 주로 사용하는 것이 가능한지 평가하기 위해 웹 구성 요소를 사용하고 있지만 여전히 상태 관리를 처리하는 방법을 원했습니다 (Polymer에서는 Mediator 패턴을 사용하도록 권장하고 Redux는 글로벌 메디 에이터 유형).

지금까지 구성 요소에 저장소를 만들고이를 사용하도록 자식 구성 요소에 전달할 수있었습니다. 이것은 모든 컨테이너 구성 요소에 상점을 전달해야하며, 다른 컨테이너로 전달해야하는 경우 프리젠 테이션 구성 요소를 통해 전달해야 할 필요가 있다는 한계가 있습니다.

그래서 저장소에 전역 변수를 저장하지 않고 트리의 저장소 구성 요소 아래에있는 모든 컨테이너 구성 요소에서 저장소를 사용할 수있게 만드는 방법을 원합니다. 나는 react-redux connect 컴포넌트와 비슷한 것을 만들 것을 상상했지만, React 컨텍스트에 의존하기 때문에 공유 객체를 만드는 방법에 대한 아이디어를 찾으려고합니다.

Answer 1

클래스를 iife 함수로 래핑하고 클래스의 범위 밖에서 변수를 선언하고 클래스의 속성을 외부 변수에 할당하면 요소의 인스턴스간에 데이터를 공유하기위한 싱글 톤 메커니즘이 만들어집니다. 그런 다음 해당 요소를 다른 요소의 템플리트 내에 포함시키고 정상적으로 바인딩합니다. 다음은 그 예입니다. https://github.com/firmfirm/f-singleton/blob/master/f-singleton.html