Как сформировать зависимые редьюсеры в redux?

Question

[Матвей]

Здравствуйте, подскажите какой верный путь для того, чтобы провести следующую схему.

Есть два компонента:

<toolbar />
<content />

toolbar содержит текущую страницу и возможность её изменить через некий <input>.
content содержит контент разбитый постранично. Текущую страницу также можно менять, предположим, посредством скроллинга.

Соответственно при изменении текущей страницы через <toolbar/> - должен отреагировать компонент <content/> и наоборот.

Каждый из блоков может менять параметр activePage. Как правильно выстроить store, редьюсеры и их зависимость в redux?

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

Я вижу вариант - через корневой редьюсер, который будет передавать изменения в дочерние.

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

Answer 1

[Mikhail Osher]

Так а в чем проблема? Вы же мапите значения из store с помощью mapStateToProps (react-redux package).
Создайте редьюсер для активной страницы и всё.

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

Comments

[Матвей]

Создайте редьюсер для активной страницы и всё.

Не совсем понял, можно небольшой примерчик? Просто помимо параметра currentPage будет ещё штук 10 других, которые также могут меняться в <toolbar /> и отражаться на компоненте <content /> и наоборот.

Вы же мапите значения из store с помощью mapStateToProps (react-redux package)

Да, но возникает вопрос как передавать state и dispatch в дочерние компоненты.

Предположим, родительский контенер-компонент выглядит так:

<div className="wrapper">
  <ToolbarBlock />
  <ContentBlock />
</div>

Тогда получается, что все mapDispatchToProps мне нужно создавать в это родительском компоненте?

const mapDispatchToProps = (dispatch) => {
  return {
    onPageChange: (page) => {
      dispatch(setCurrentPage(page))
    },
    ...
};

И затем передавать из родительского компонента в дочерний:

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(AppContainer);

<div className="wrapper">
  <ToolbarBlock 
    onPageSelect={this.props.onPageChange} />
  <ContentBlock
    onPageScroll={this.props.onPageChange} />
</div>

и тоже самое касается и stateToProps:

<div className="wrapper">
  <ToolbarBlock 
    onPageSelect={this.props.onPageChange}
    currentPage={this.props.currentPage} />
  <ContentBlock
    onPageScroll={this.props.onPageChange}
    currentPage={this.props.currentPage} />
</div>

подскажите, я правильно понимаю логику или нет? Меня смущается именно наличие большого root reducer и root container.