Как я могу объединить 2 использования connect ()?

Question

Я звоню connect() дважды по своему компоненту, и рецензент попросил меня перейти к одному.

У меня есть это, которое работает как ожидалось:

export default compose(
  connect(store => ({
    softlayerAccountId: store.global.softlayerAccountId,
  })),
  connect(
    ({ shipments }) => ({
      pagination: shipments.pagination,
      isFiltersModalOpened: shipments.filtersModalOpened,
      filters: shipments.filters,
    }),
    dispatch => ({...}),
  ),
)(GetShipments);

И они хотят, чтобы я сделал что-то вроде этого:

export default compose(
  connect(
    store => ({
      softlayerAccountId: store.global.softlayerAccountId,
    }),
    ({ shipments }) => ({
      pagination: shipments.pagination,
      isFiltersModalOpened: shipments.filtersModalOpened,
      filters: shipments.filters,
    }),
    dispatch => ({...}),
  ),
)(GetShipments);

Но я получаю эту ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'pagination' из неопределенного

Или это:

export default compose(
  connect(
    ({ shipments }, store) => ({
      softlayerAccountId: store.global.softlayerAccountId,
      pagination: shipments.pagination,
      isFiltersModalOpened: shipments.filtersModalOpened,
      filters: shipments.filters,
    }),
    dispatch => ({...}),
  ),
)(GetShipments);

Но я получаю это:

Uncaught TypeError: Невозможно прочитать свойство 'softlayerAccountId' из неопределенного

Есть идеи?

Answer 1

вы делаете это неправильно. connect() принимает два аргумента: mapStateToProps обратный вызов и mapDispatchToProps. Во втором варианте вы пытаетесь передать 3 аргумента, где 2-й фактически также относится к хранилищу (таким образом, вы помещаете mapStateToProps на mapDispatchToProps место).

Вам нужно иметь 2 аргумента:

export default compose(
  connect(
    ({global: {softlayerAccountId}, shipments }) => ({
        softlayerAccountId: store.global.softlayerAccountId,
        pagination: shipments.pagination,
        isFiltersModalOpened: shipments.filtersModalOpened,
        filters: shipments.filters,
    }),
    dispatch => ({...}),
)(GetShipments);

Почему 3-й вариант не работает? Причина та же: вы пытаетесь привести аргументы там, где они не могут работать.

({ shipments }, store) => ({

Здесь вы объявляете функцию, которая принимает два аргумента. Первый - это деструктурирование, а второй только что передан. Но connect передаст только один аргумент store. Он не пройдет store несколько раз только потому, что вы ожидаете этого.