Реакция на одно действие Redux в множественных редукторах

Question

Я использую несколько редукторов в своем проекте, а затем объединяю их с функцией combReducers () и выполняю все действия в одном файле. когда я отправляю действие, оно возвращает мне значения состояния в undefined. Я думаю, что это не может быть выяснено из-за множественного редуктора. Но когда я использую один файл редуктора. Работает нормально. Может кто-нибудь, пожалуйста, скажите мне, в чем проблема. Именно так я комбинирую редукторы.

const rootReducer = combineReducers({
  isMobileReducer,
  imageSliderReducer
})

и теперь переходим в магазин, как показано ниже:

let store = createStore(rootReducer,applyMiddleware(thunk))

и как я получаю доступ к состоянию

const mapStateToProps = (state) => ({
 images: state.images,
 isMobile: state && state.isMobile
})

imageSliderReducer.js

import {
 FETCH_IMAGES_BEGIN,
 FETCH_IMAGES_SUCCESS,
 FETCH_IMAGES_FAILURE
} from '../actions/actionTypes'

const initialState = {
 images:[],
 error:null
}

const imageSliderReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_IMAGES_BEGIN:
      return {...state,error:null}
    case FETCH_IMAGES_SUCCESS:
      return {...state,images:action.payload.images}
    case FETCH_IMAGES_FAILURE:
      return {...state,error:action.payload.error,images:[]}
    default:
      return state
  }
}
export default imageSliderReducer;

isMobileReducer.js

import {
 OPEN_MENU,
 CLOSE_MENU,
 SET_DEVICE_TYPE,
} from '../actions/actionTypes'

const initialState = {
 isMenuOpen: null,
 isMobile: false
}

const isMobileReducer = (state = initialState, action) => {
  switch (action.type) {
   case OPEN_MENU:
    return {...state, isMenuOpen: true}
   case CLOSE_MENU:
    return {...state, isMenuOpen: false}
   case SET_DEVICE_TYPE: 
    return {...state, isMobile: action.isMobile}
   default:
    return state
  }
}

export default isMobileReducer;

actionCreator.js

import { 
 OPEN_MENU,
 CLOSE_MENU,
 SET_DEVICE_TYPE,
 FETCH_IMAGES_BEGIN,
 FETCH_IMAGES_SUCCESS,
 FETCH_IMAGES_FAILURE
} from './actionTypes'

export function openMenu(isMobile) {
 return {
  type: OPEN_MENU
 }
}

export function closeMenu(isMobile) {
 return {
  type: CLOSE_MENU
 }
}

export function setDeviceType (isMobile) {
 return {
  type: SET_DEVICE_TYPE,
  isMobile: isMobile
 }
}

 export function fetchImages() {
 return dispatch => {
  dispatch(fetchImagesBegin());
   return fetch("https://7344.rio.com/wp-json/customapi/homeslider")
  .then(handleErrors)
  .then(res => res.json())
  .then(json => {
    dispatch(fetchImagesSuccess(json.posts));
    return json.posts;
  })
  .catch(error => dispatch(fetchImagesFailure(error)));
};
}


function handleErrors(response) {
 if (!response.ok) {
   throw Error(response.statusText);
 }
 return response;
}

export const fetchImagesBegin = () => ({
 type: FETCH_IMAGES_BEGIN
});

export const fetchImagesSuccess = images => ({
 type: FETCH_IMAGES_SUCCESS,
 payload: { images }
});

export const fetchImagesFailure = error => ({
 type: FETCH_IMAGES_FAILURE,
 payload: { error }
});

Answer 1

Попробуйте использовать это:

    const mapStateToProps = (state) => ({
  images: state.imageSliderReducer.images,
  isMobile: state.isMobileReducer.isMobile
 })