How to generate dependent reducers in redux?

Question

JavaScript

Hello, tell me what is the right way to draw the following scheme.
There are two components:

<toolbar />
<content />

toolbar contains the current page and the ability to change it through a certain <input>.
content contains paginated content. The current page can also be changed, for example, by scrolling.
Accordingly, when changing the current page through <toolbar/>- the component should react <content/>and vice versa.
Each of the blocks can change the activePage parameter. How to properly build store, reducers and their dependency in redux?

store = {
   app: {
     activePage: 1,
     toolbar: {
       ...., // некие параметры, относящиеся только к тулбару
       // нужно ли дублировать activePage здесь?
     },
     content: {
       ...,
     }
  }
}

I see an option - through the root reducer, which will transfer changes to the children.

case type.SET_ACTIVE_PAGE:
      return {
        ...state,
        activePage: action.activePage,
        toolbar: toolbarReducer(state.toolbar, action),
        content: contentReducer(state.content, action)
      };
      break;

Answer 1

So what's the problem? You map values ​​from store using mapStateToProps (react-redux package).
Create a reducer for the active page and that's it.
The shape of the state is up to you: it can be a primitive , an array, an object, or even an Immutable.js data structure