React/Redux:容器是否应该了解状态结构？

Question

Dan Abramov的这篇教程表明,使用作用于全局状态(而不是状态片段)的选择器的优点是它们允许容器与状态结构的知识分离.

如果是这种情况,我们是否应该避免直接将状态值映射到props,而是使用选择器？否则,我们的容器仍然必须知道状态树中存在这些值的位置.

为了说明一个例子......

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

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

VS

不了解国家结构.使用isModalVisible()selector 获取值:

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

但是,后一种方法的问题是对于状态树中的每个值,我们必须编写一个选择器.这似乎是很多样板代码只是为了选择一个简单的值.这被认为是最佳做法吗？

Answer 1

你的问题的答案是:"这取决于"

你有一个小应用程序吗？

也许可以避免使用redux并坚持反应组件状态.

      你可能不需要Redux

你有一个小应用程序吗？

写一堆选择器就像你说的那样很多样板.避免编写它们并坚持使用简单的映射mapStateToProps.

大中型应用？

这是选择器和备忘选择器的回报.你会发现自己检查模态是否在许多组件中可见.目前在你的州模态下state.modal.visible.但是明天模态可能是父模式的一部分,你必须将所有组件中的所有映射都更改为state.parentModal.modal.visible.你可以看到这怎么可能变得非常糟糕？

选择者的优点:

• 在团队中工作时隐藏复杂性.
• 更改状态意味着只修改选择器功能.
• 避免在每个mapPropsToState函数上编写过滤器和减少列表.

记忆选择器的优点:

• 性能.

缺点

• Boilerplate代码,启动速度较慢.
• 其他图书馆.

希望它能回答你的问题.