Question

目前，我在容器中有连接语句。这导致我必须在一个大的连接语句中连接所有单独的状态和操作：

@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，而不是容器？

这是不是一种不好的做法？

Answer 1

这可能是一个主观模式问题，但也许我可以提供客观的观点。

尝试在不考虑Container模式的情况下查看它。没有什么能阻止你直接在组件级注入Redux，但是，这种类型的组件本质上不如简单地操作props的组件（来自任何容器，Redux或其他）。

E.g。如果你有一个<ContactList>组件自注reduxState.listOfPeople，那么ContactList不能重新用于任何其他容器/列表道具。更有用的ContactList只是一个查找<ContactList list={...}>的容器，容器可以提供它想要的，Redux或其他方式。

在Redux容器模式中。应该＆＃39;连接＆＃39;在组件或容器中？

1 个答案: