Pfthb

I am using multiple reducers in my project and then combining them with combineReducers() function and have all actions in single file. when i dispatch the action, it is returning me state values to undefined. I think It can't find out because of multiple reducerse. But when i use single reducer file. It is working fine. Can anyone please tell me what the issue.It is how i am combining the reducers.

const rootReducer = combineReducers(
 isMobileReducer,
 imageSliderReducer
)

and now passing to store, like below:

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

and in frontend how i am accessing state

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 
);

Try using this:

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