В шаблоне контейнера Redux.Должно ли «соединение» быть в компонентах или контейнерах? - PullRequest
Новая
       7

В шаблоне контейнера Redux.Должно ли «соединение» быть в компонентах или контейнерах?

0 голосов
/ 10 июня 2018

В данный момент у меня есть операторы connect в контейнерах.Это приводит к тому, что мне приходится связывать все отдельные состояния и действия в одном большом операторе connect: 

@connect(
  (state: RootState): Pick<App.Props, 'state1' & 'state2' & 'state3'> => {
    return { state1: state.state1, state2: state.state2, state3: state.state3 }
  },
  (dispatch: Dispatch<Action<Actions1 & Actions2 & Actions3>>): Pick<App.Props, 'action1' & 'action2' & 'action3'> => ({
    action1: bindActionCreators(omit(Actions1, 'Type'), dispatch),
    action2: bindActionCreators(omit(Actions2, 'Type'), dispatch),
    action3: bindActionCreators(omit(Actions3, 'Type'), dispatch)
  })
)

Затем я передаю все реквизиты в дереве таким компонентам: 

<Component1 props={ this.props.action1 } />
<Component2 props={ this.props.action2 } />

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

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

Есть ли какая-то причина, по которой мы не можем использовать @connect в компонентах, а не в контейнерах?

Есть ли причина, по которой это будет плохой практикой?

1 Ответ

0 голосов
/ 10 июня 2018

Это может быть вопрос субъективного паттерна, но, возможно, я могу предложить объективную перспективу.

Попробуйте взглянуть на него, не думая конкретно о паттернах контейнера.Ничто не мешает вам вводить Redux напрямую на уровне компонентов, но этот стиль компонента по своей природе менее гибок, чем компонент, который просто работает с подпорками (из любого контейнера, Redux или иным образом).

Например, если выимел компонент <ContactList>, который самостоятельно вводил reduxState.listOfPeople, который ContactList не мог быть повторно использован для любого другого объекта контейнера / списка.Более полезный ContactList - это просто тот, который ищет <ContactList list={...}>, и контейнер может предоставить то, что он хочет, Redux или каким-либо другим способом.

...