Reusable react-redux 컨테이너 구성 요소

Question

내 React/Redux 응용 프로그램에서 저는 응용 프로그램 전체에서 사용해야하는 상태로 구성 요소를 구현하는 문제에 직면하고 있습니다. 간단한 팝업 구성 요소를 모든 페이지에서 다시 사용할 수있는 열림/닫음 상태를 예로 들어 봅시다. 그 상태를 관리하기 위해 (의 기본 setState 반응 단지 구문 설탕입니다 내가 recompose.withReducer 사용)

• 사용 setState하고 "로컬"감속기 : 여기 내가 찾은 두 가지 접근 방식이다. 페이지의 다른 부분에서 구성 요소의 상태를 변경해야 할 때까지 쉽고 재사용 가능합니다. 그리고 당신은 상태를 바꾸기 위해 어떤 redux 액션을 호출 할 수 없습니다.

• 구성 요소의 상태를 Redux 저장소에 보관하십시오. 그런 접근 방식을 사용하면 구성 요소 트리의 어느 위치에서나 closePopupAction({ id })을 호출하여 상태를 변경할 수 있습니다. '하지만 구성 요소가 마운트되고 삭제 될 때 필자는 어떻게 든 감속기 (루트 폴더에 유지하려고하는)를 루트 감속기에 넣어야합니다. 구성 요소가 마운트 해제 될 때 게다가 우리는 페이지에 배수 팝업을 가질 수 있으며 각각은 고유 한 상태를가집니다.

누구와 비슷한 문제가 있습니까?

Answer 1

필자는 구성 요소의 상태를 줄여야한다고 생각합니다. 이 방법으로이 구성 요소와 사용 combineReducers 기능에 대한 감속기를 만들 수 있습니다

rootReducer = combineReducers({ 
    moduleA: combineReducers({ 
     popupA: popupReducer("id1"), 
     popupB: popupReducer("id2") 
    }), 
    moduleB: combineReducers({ 
     popupA: popupReducer("id3") 
    }) 
    }) 
}); 

를 다음 ID를 확인하고 국가의 적절한 부분을 변경할 수 있습니다 closePopupAction ("ID1") 감속기를 호출 할 때.

PS : ID가 더 나은 방법으로 제공되어야한다 :

Answer 2

당신은 그 가게의 자체 슬라이스에 각 구성 요소의 상태를 탑재 할 수있다.

closePopupAction({ mountPath: 'popups.popup1' }) 

당신은 시작시 한 번 등록 할 수있는 모든 closePopupAction 작업을 처리 할 단 하나의 감속기를 필요 :

그래서 closePopupAction 조치는 그 마운트 경로로 호출됩니다

(state, { type, mountPath }) => { 
     if (type === 'CLOSE_POPUP_ACTION') { 
     // manipulate with the slice at `mountPath`, e.g. 
     return _.set(_.cloneDeep(state), `${mountPath}.isOpen`, false) 
     } 
     // ... 
    }