React Redux - Sharing state between reducers (reducers hierarchy)

Question

Saying i have an expedia-like search bar tabs:

I want some of the fields (like Departing and Returning dates) to be common to all tabs.

So my state should look something like

{
  commonReducer: {
    startDate:
    endDate: 
  },
  hotelsReducer: {
    rooms: [],
    location: []
  },
  flightsReducer: {
    from:
    to:
  }
  etc...
}

Where the commonReducer data is shared between all other tab reducers, since when they click the search button, all reducers should be aware of the selected dates, along with their specific data.

Is there a way to share data between reducers? or have some kind of hierarchy like:

{
  searchTabsReducer: {
    commonReducer: {
      startDate:
      endDate: 
    },
    hotelsReducer: {
      rooms: [],
      location: []
    },
    flightsReducer: {
      from:
      to:
    }
    etc...
  }
}

So that the searchTabsReducer would handle all submits (since he's the only one that has the full picture of the search tabs state)?

From what i understand, the combine reducers function does not support hierarchy.

I ended up having one way too large file that contains all of the tabs states, but that doesn't feel right.

Thanks.

Answer 1

There is no need to combine the reducers, just connect the state from the reducers you need to the containers you want to display the data in.

From there, use that data to dispatch actions, for example your search action.