javascript - react /归零 : Should containers have any knowledge of state structure?

Question

这tutorial Dan Abramov 提出，使用作用于全局状态(而不是一部分状态)的选择器的优势在于它们允许容器与状态结构的知识分离。

如果是这样的话，我们不应该也避免直接将状态值映射到 Prop ，而改用选择器吗？否则，我们的容器仍必须知道这些值在状态树中的位置。

用一个例子来说明...

直接将嵌套状态值映射到 prop:

const mapStateToProps = (state) => ({
  isModalVisible: state.modal.isVisible,
});

对比

不了解状态结构。使用 isModalVisible() 选择器获取值:

const mapStateToProps = (state) => ({
  isModalVisible: isModalVisible(state),
});

然而，后一种方法的问题在于，对于状态树中的每个值，我们都必须编写一个选择器。这看起来像是很多样板代码，只是为了选择一个简单的值。这被认为是最佳实践吗？

Answer 1

你的问题的答案是:“视情况而定”

你有小应用吗？

也许完全避免使用 redux 并坚持 react 组件状态。

You Might Not Need Redux

你有小应用吗？

正如您所说，编写一堆选择器是很多样板文件。避免编写它们并坚持简单映射，使用 mapStateToProps。

大中型应用？

这就是选择器和记忆化选择器发挥作用的地方。您会发现自己正在检查模态框在许多组件中是否可见。当前在您的状态模态下 state.modal.visible。但是明天模态框可能成为父模态框的一部分，您必须将所有组件中的所有映射更改为 state.parentModal.modal.visible。您可以看到这会变得很糟糕吗？

选择器的优点:

• 在团队合作时隐藏复杂性。
• 更改状态意味着仅修改您的选择器函数。
• 避免在每个 mapPropsToState 函数上编写过滤器和缩减列表。

Memoized 选择器的优点:

• 表现。

缺点

• 样板代码，上手速度较慢。
• 其他库。

希望它能回答您的问题。