combinereducers를 사용하여 중첩 된 redux reducers 들러 붙어

Question

중첩 된 reducers 작업 예제를 살펴 보았지만 매우 이상한 문제가 있습니다.

window.store = configureStore({ 
 
    slider: { 
 
    mainImageIndex: 0, 
 
    pageNum: 1, 
 
    perPage: 4, // Per supplied requirements 
 
    }, 
 
});

가 내하는 index.js 감속기에 다음 (모든 수입 제외) :

export default combineReducers({ 
 
    searchPhotos, 
 
    slider: combineReducers({ 
 
    mainImageIndex: setMainImage, 
 
    pageNum: nextPage, 
 
    perPage: setPerPage, 
 
    }), 
 
    form: reduxFormReducer, // mounted under "form" 
 
});

나는 다음과 같은 초기 상태가

그리고 내 setMainInage.js 감속기 : 첨부

export default (state = {}, action) => { 
 
    switch (action.type) { 
 
    case 'SET_MAIN_IMAGE': 
 
     return { 
 
     ...state, 
 
     mainImageIndex: action.mainImageIndex, 
 
     }; 
 
    default: 
 
     return state; 
 
    } 
 
};

가 이전과 REDUX의 DevTools로의 화면 잡고 후입니다. SET_MAIN_IMAGE를 호출 한 후 슬라이더 노드 내의 계층 구조가 변경됩니다. mainImageIndex를 업데이트하는 대신 몇 가지 이유로 원래의 새 mainImageIndex 키를 중첩합니다. 누구든지 그 원인을 알 수 있습니까?

Answer 1

확인해야 할 사항은 action에 무엇이 있습니까?

귀하의 감속기가

1. 첫 번째 단계처럼 될 것이다

{ 
    type: 'SET_MAIN_IMAGE', 
    mainImageIndex: { 
     mainImageIndex: 2 
    }, 
} 

같은 것을 포함 보인다

case 'SET_MAIN_IMAGE': 
    return { 
     ...state, 
     mainImageIndex: action.mainImageIndex, 
    }; 

2. 두 번째 단계

case 'SET_MAIN_IMAGE': 
    return { 
     mainImageIndex: 0, 
     pageNum: 1, 
     perPage: 4, 
     mainImageIndex: action.mainImageIndex, 
    }; 

3. 세 번째 단계

case 'SET_MAIN_IMAGE': 
    return { 
     mainImageIndex: 0, 
     pageNum: 1, 
     perPage: 4, 
     mainImageIndex: { 
      mainImageIndex: 2 
     }, 
    }; 

4.당신이 다음에 사용하는

{ 
    type: 'SET_MAIN_IMAGE', 
    mainImageIndex: 2 
} 

이상

{ 
    type: 'SET_MAIN_IMAGE', 
    payload: { 
     mainImageIndex: 2, 
    } 
} 

처럼 뭔가를 보내기 위해

변경에게 action 페이로드를 어떻게해야 네 번째 단계

case 'SET_MAIN_IMAGE': 
    return { 
     pageNum: 1, 
     perPage: 4, 
     mainImageIndex: { 
      mainImageIndex: 2 
     }, 
    }; 

에야디야 UR 감속기

case 'SET_MAIN_IMAGE': 
    return { 
     ...state, 
     ...action.payload, 
    }; 

는 도움이되기를 바랍니다.

Answer 2

그래서 슬라이더에 대한 새로운 감속기를 작성하여 문제를 해결할 수 있었으며 파일 당 하나의 기능을 갖는 대신 감속기 내부에 모든 조치를 취할 수있었습니다.

export default combineReducers({ 
 
    searchPhotos, 
 
    slider, 
 
    form: reduxFormReducer, // mounted under "form" 
 
});

나는 여전히 여러 파일과 함께 할 수있는 방법이 있어야합니다 생각하지만, 어쩌면 의미는 국가의 한 부분에 대한 모든 작업을 넣을 수 있도록 않습니다 그럼 난 그냥 할 수있는 같은 감속기에서.