redux 상태 트리의 중복 항목

Question

토글 버튼을 사용하여 Redux 상태를 업데이트하려고합니다. 내 LB 감속기는 2 개의 감속기, 즉 고유 값 수를 표시하기위한 listItems이라는 배열과 현재 필터에 대한 참조로 사용되는 filterBarState으로 구성됩니다.

내 초기 상태가 올바른지 동안

내 감속기는 아래 filterBarState

의 외부 토글 동작을 배치 내 LB 객체 감속기는 내 기본 컨테이너 구성 요소 반응, 내가 시도 일부에서

export default (state = INITIAL_STATE, action) => { 
    switch (action.type) { 
    case EVENT_FILTER_PRESSED: 
     return { 
     // Reducer composition 
     filterBarState: eventFilter(state.filterBarState, action), 
     listItems: eventItems(state.listItems, action) 
     }; 
    case MALE_FILTER_PRESSED: 
     // console.log('isMaleFilterOn:', action.isMaleFilterOn) 
     return { ...state, isMaleFilterOn: action.isMaleFilterOn }; 
    case FEMALE_FILTER_PRESSED: 
     // console.log('isFemaleFilterOn:', action.isFemaleFilterOn) 
     return { ...state, isFemaleFilterOn: action.isFemaleFilterOn }; 

(용의자) mapstateToProps에서 ES6 구조 변경, 포함하지 않으면 전체 filterBarState이 반환됩니다. undefined

const mapStateToProps = ({ LB }) => { 

    const { filterBarState: { isMaleFilterOn, isFemaleFilterOn, currentSelectedEvent, currentSelectedRow }, listItems, isCurrentlySelected } = LB; 

    return { isMaleFilterOn, isFemaleFilterOn, currentSelectedEvent, currentSelectedRow, listItems, isCurrentlySelected }; 

수정 사항에 대한 모든 팁/제안 사항을 크게 높이세요!

Answer 1

EVENT_FILTER_PRESSED 처리기를 기반으로 올바른 레벨에서 isMaleFilterOn 및 isFemaleFilterOn을 업데이트하지 않는 것 같습니다. 이것을 시도하십시오 :

export default (state = INITIAL_STATE, action) => { 
    switch (action.type) { 
    case EVENT_FILTER_PRESSED: 
     return { 
     // Reducer composition 
     filterBarState: eventFilter(state.filterBarState, action), 
     listItems: eventItems(state.listItems, action) 
     }; 
    case MALE_FILTER_PRESSED: 
     // console.log('isMaleFilterOn:', action.isMaleFilterOn) 
     return { ...state, filterBarState: { ...state.filterBarState, isMaleFilterOn: action.isMaleFilterOn } }; 
    case FEMALE_FILTER_PRESSED: 
     // console.log('isFemaleFilterOn:', action.isFemaleFilterOn) 
     return { ...state, filterBarState: { ...state.filterBarState, isFemaleFilterOn: action.isFemaleFilterOn } }; 
}