Yustas Alexu

Делают основную вёрстку и в неё добавляют отдельные компоненты (каталог с фильтрами, слайдеры, галереи товара) ?
Или же сразу вся страница вместе с вёрсткой изначально это какой то глобальный компонент ? И уже в нём отдельные "подкомпоненты" ?

Второе. У Реакт приложения бывает root-элемент. Это элемент на странице, который будет считаться корневым. Все что ниже этого элемента есть реакт-приложение, которое контроллируется реактом. То есть представляет собой набор компонентов вложенных друг в друга.

Как компоненты взаимодействуют друг с другом (меняют состояние друг друга)? Через глобальный/родительский компонент ?

Состояние компонента можно поменять извне через изменение его props. Props можно прокидывать вниз по иерархии от компонента к компоненту или использовать глобальное хранилище, например Redux.

Подводных камней я думаю никаких нет, просто так никто не делает, потому что в этом нет никакой необходимости.

export default function Reducer(state = initialState, action) {
  switch (action.type) {
    case RESET_TYPE_ID:
      return {
        ...state,
        filter_models: {
          ...state.filter_models,
          type_id: null
        }
      };

P.S. Но в вашем случае это плохая идея, потому что делать сброс значения на каждый пустой фильтр это не очень эффективно. Как вариант можно полностью переписывать filter_models при каждом изменении фильтра изначально отбрасывая фильтры без значений. В этом может помочь pickBy из lodash:
const filters = _.pickBy(filterSet, _.identity);