redux 상태에 저장할 품목은 무엇입니까?

Question

중간 규모의 React/Redux 응용 프로그램을 구축 중이며 React에 매우 익숙해졌습니다. 그러나 Redux는 여전히 내 머리를 감싸기가 어렵습니다.

Redux의 connect()을 사용하여 구성 요소 또는 컨테이너를 Redux 상태로 연결할 수 있다는 것을 알고 있습니다. 그러나 나는 이것을 언제해야하는지 명확하지 않다 - 복잡성에 근거한 것인가? 하위 구성 요소로 전달해야하는 소품 수는 몇 개입니까?

connect()을 사용할시기를 결정하는 데 사용할 수있는 요인은 무엇입니까? -----

예를 들어, 나는 내 응용 프로그램, 읽지 않은 메시지의 수를 보여주는 특히 배지 내부 사용자를위한 메시지 영역을 포함하려면 :

편집 예를 제공합니다. 간단하게 connect() 배지를 표시하고 싶은 구성 요소는 있습니까?

Answer 1

앱 상태를 줄이거 나 저장합니다. 상태 트리를 구조화하는 방법은 당신에게 달렸습니다. 상태 트리를 하나의 거대한 자바 스크립트 객체로 생각할 수 있습니다. redux를 사용하면 반응 구성 요소 자체에 구성 요소 상태를 적게 저장하고 대신 redux 상태 트리로 이동합니다.

예를 들어 일부 사용자 데이터를 가져온 경우 연결된 구성 요소가 해당 데이터에 액세스 할 수 있도록 redux 상태로 저장할 수 있습니다. 또한 특정 UI 구성 요소를 설명하는보다 세부적이고 저장소 상태를 얻을 수 있습니다. 드롭 다운을 설명 당신의 국가의 일부는 내가 당신의 앱이 구성 요소가 더 이상 그냥 "바보"구성 요소없는 특정 지점에 도달 할 때 REDUX가 통합 시작하기에 좋은 점을 생각이

{ 
    myDropdown: { 
    isOpen: false, 
    options: [ 
     'apple', 
     'orange' 
    ] 
    } 
} 

처럼 보일 수있는 데이터를 표시합니다.

편집 : "구성 요소를 언제 연결해야합니까?"라는 질문에 대답하십시오. 나는 이걸로 고생했으나 아직 큰 답을 얻지 못했습니다. 지금은 일반적으로 그 구성 요소에 대한 많은 조상 구성 요소를 통해 소품을 전달할 경우 일반적으로 구성 요소를 연결합니다. 따라서 연결하면 상용구 코드가 완전히 삭제됩니다.

Answer 2

나는 모든 구성 요소 상태를 상점에 저장하는 것에 동의하지 않습니다. 나는 전체적으로 애플리케이션에 중요한 데이터만을 redux 스토어에 저장하는 편이 좋으며 따라서 다른 구성 요소는이 글로벌 액세스 가능 공유 데이터의 이점을 누릴 수 있습니다.

저장소에 구성 요소 특정 상태가 있으며이 구성 요소에서만 중요한 점은 잔인하고 쓸모없는 IMO입니다.