React Redux - список элементов по некоторым критериям

Я столкнулся с проблемой React Redux, когда мне нужно, чтобы одна страница отображала несколько списков элементов из одного и того же API. Например, у меня есть конечная точка /items с параметром GET /items?city=Berlin. Мне нужно отобразить списки элементов 5 городов на главной странице.

В настоящее время у меня есть 1 действие для обработки вызова API.

Вот мой reducer.js:

...
const initialState = fromJS({
  ...
  items: [],
  ...
})

export default function reducer (state = initialState, action) {
  ...
  switch (action.type) {
    case fetchItemsByCityRoutine.SUCCESS:
      return state.update('items', (items) => items.push(...action.payload.data))
  ...

} }

saga.js:

function * fetchItemsByCity ({ payload: city }) {
  try {
    yield put(fetchItemsByCityRoutine.request())
    const response = yield call(apiClient.fetchItemsByCity, city)
    response.city = city

    yield put(fetchItemsByCityRoutine.success(response))
  } catch (error) {
    yield put(fetchItemsByCityRoutine.failure(extractErrorMessage(error)))
  } finally {
    yield put(fetchItemsByCityRoutine.fulfill())
  }
}

function * watchItemsByCitySaga () {
  yield takeEvery(fetchItemsByCityRoutine.TRIGGER, fetchItemsByCity)
}

На Домашняя страница я отображаю список таких городов:

const renderCityListSections = () => homepageCityLists.map((city) => <ItemList key = {city.cityName} {...city} />)

Компонент ItemList:

class ItemList extends Component {
  componentDidMount () {
    const { cityName } = this.props
    this.props.fetchItemsByCityRoutine(cityName)
  }

  render () {
    const { items, title } = this.props

    return (
      items.length > 0 &&
      <Wrapper>
        <SlickSlider>
          {items.map((item) => <Item key = {item.id} {...item} />)}
        </SlickSlider>
      </Wrapper>
    )
  }
}

ПРОБЛЕМА заключается в том, что текущее решение заставляет повторно визуализировать представление слишком много раз, потому что каждый раз, когда я получаю новый список для какого-то города, он добавляется в items, поэтому элементы меняются, и это приводит к запуску повторного отображения представления.

У меня была мысль создать 5 разных действий для каждого города, но это не кажется разумным решением.

КАК лучше всего отображать несколько списков городов на одной странице?

ОБНОВИТЬ:

Итак, я изменил редуктор, чтобы он выглядел так:

const initialState = fromJS({
  ...
  items: {
    Miami: [],
    Prague: [],
    Melbourne: [],
    Venice: [],
    Barcelona: [],
  },
  ...
})

export default function reducer (state = initialState, action) {
  switch (action.type) {
    ...
    case fetchItemsByCityRoutine.SUCCESS:
      return state.updateIn(['items', action.payload.city], (list) => (
        list.concat(action.payload.data)
      ))
    ...
  }
}

поэтому каждый массив неизменяем, но опять же приходится слишком много перерисовывать.

У всех, у кого есть такая проблема, у меня получился этот РЕШЕНИЕ:

В моем редуктор я развязал каждый элемент для города следующим образом:

const initialState = fromJS({
  ...
  itemsForBerlin: [],
  itemsForAnotherCity: [],
  ...
})

export default function reducer (state = initialState, action) {
  switch (action.type) {
    ...
    case fetchItemsByCityRoutine.SUCCESS:
      return state.set(`itemsFor${action.payload.city}`, action.payload.data)
    ...
  }
}