state variables are coupled with reducer names in redux - reactjs

Question

This might be a really silly one, but I was hanging my head around it for a while. I have a React project ( with Redux ). In mapStateToProps, state value is coming as undefined if I try to access the state directly as
const mapStateToProps = state => ({ data: state.data });
Instead, I always have to specify my reducer name ( the reducer which handles this particular state in it ) to access the state value :
const mapStateToProps = state => ({ data: state.customReducer.data });
Here is my code :
import { combinedReducer } from 'redux;
import customReducer from './customReducer';
const rootReducer = combineReducer({
customReducer
});
export default rootReducer;
customReducer.js : as follows
const initialState = {};
const customReducer = ( state = initialState, action ) => {
const { type, payload } = action;
switch (type) {
case 'SOME_ACTION':
return {
...state,
data: payload.data
}
break;
default:
return state;
}
}
export default customReducer;
store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';
const configStore = () => {
return createStore (
rootReducer,
applyMiddleware(thunk)
);
}
const store = configStore();
export default store;
Does anyone know what is going wrong with the implementation ? Or is it the way to access different state values from different store ?
How can I directly access any state variable as
data: state.`state_value` , instead of , data : state.`reducerName`.`state_value` ?
Any help on this would be much appreciated.

Answer 1

There's nothing wrong with your implementation, this is just the way that combineReducers works. The reducer names are used to partition your store (e.g. Everything in your users reducer will be under state.users).
If you don't want to have to use the name of the reducer in your mapStateToProps, you can use selectors. However, in the selector, you will still have to use state.reducerName.
If you really don't want to have to go through more than one layer to get to the value you want, you could create a separate reducer for each value (i.e. In your example, the reducer would be named data). This obviously isn't the preferred way of doing it though.

Answer 2

Well, combineReducers isn't really using the reducer name, but the property name you specify for it. If you do:
const rootReducer = combineReducer({
foo: customReducer,
});
You'll be able to access the data at state.foo.data.