Can I access a state in redux like this?

Question

Source Code

redux.js

import parent_reducer from './parent_redux';
import { combineReducers } from 'redux';

export default combineReducers({ parent:parent_reducer });

parent_redux.js

import { combineReducers } from 'redux';
import { createAction, handleActions } from 'redux-actions';
import child_reducer from './child_redux';

const initial_state = {
    number: 0
};

const parent_reducer = handleActions({
    ...
}, initial_state);

export default combineReducers({ self: parent_reducer, child: child_reducer });

child_reudx.js

import { createAction, handleActions } from 'redux-actions';

const initial_state = {
    number: 0
};

export default handleActions({
    ...
}, initial_state);

What I want

In the above source code, when accessing number variables, it is as follows. state.parent.self.number and state.parent.child.number

But I want to access it as follows. state.parent.number and state.parent.child.number

This inconvenience often occurs when using redux hierarchically.

Is there any way you can solve it? Thansk for reading :)

Answer 1

redux.js

import parent_reducer from './parent_redux';
import { combineReducers } from 'redux';

export default combineReducers({ parent:parent_reducer });

parent_redux.js

import { combineReducers } from 'redux';
import { createAction, handleActions } from 'redux-actions';
import child_reducer from './child_redux';

const initial_parent_state = 0;

const parent_reducer = handleActions({
   ...
}, initial_parent_state);

export default combineReducers({ number: parent_reducer, child: 
child_reducer });

child_reudx.js

import { createAction, handleActions } from 'redux-actions';

const initial_state = {
  number: 0
};

export default handleActions({
   ...
}, initial_state);

I just made a minor change in the parent_redux.js all the while keeping the rest of the code same.

This should give you the desired state structure.

You have to understand one thing, both of your reducers earliers were returning an object with the same key number, so you needed to attach a key self as an extra to establish a parent-child relationship of 'Redux' to build the state.

Instead, if you return a primitive value, key to store the value can be same key as it was in the object returned by the previous reducer.

Hope this solves the problem for you, without breaking patterns of your code.