使用 Redux Hooks 而不是 connect() 是好的设计吗？

Question

目前有两个概念如何将 React 组件连接到 redux 存储：connect() and Redux Hooks。我想知道使用钩子是否被认为是好的软件设计。

• 它损害了单一职责原则，因为组件不仅负责呈现数据，而且还负责连接到商店。
• Component 和 Redux 之间存在紧密耦合。将很难重用组件或从 Redux 切换到另一个状态管理解决方案。

在软件质量方面，hooks 比 connect() 有什么优势吗？

Answer 1

connect 和 useSelector/useDispatch 都是从 React 组件与 Redux 存储交互的有效方式。但是，它们有不同的权衡。我在 post Thoughts on React Hooks, Redux, and Separation of Concerns, and my ReactBoston 2019 talk on Hooks, HOCs, and Tradeoffs.

中谈到了这些权衡

总结：是的，钩子通常会导致在内部做更多事情的组件，而不是做不同事情的单独组件。这两种方法都是有效的 - 这是您特别想要构建您的系统的问题。

在 "advantages" 方面：React-Redux 的钩子需要编写的代码总量比 connect 少，不添加间接寻址，并且更易于与 TypeScript 一起使用。

Answer 2

就我个人而言，我非常赞成使用 hooks 而不是 connect()()，原因如下：

• 可以轻松嵌套在其他自定义挂钩中以创建复杂的行为，这是 connect()()
做不到的
• 在编码和重构期间更容易从组件 add/remove - 语义的破坏性较小（您仍在导出相同的东西）
• 关注点分离 - 如果您的组件使用多个不同的 redux 状态位，它们都通过单个 mapStateToProps 函数进入，而您可以为不同的 redux 状态位创建多个挂钩
• 简化 React 树 - connect()() 有效地导致渲染两个 React 元素："dumb" 元素和连接的元素。这会使您的树嵌套两倍！
• 更直观的语法 - 我发现自己经常使用 connect()() 来获取文档，尽管我已经使用它数百次了。

同意 hooks 比 connect()() 更耦合 - 如果您担心这一点，您可以添加一个抽象层：

import { useBadgers } from '../reducers/badgers';

function MyBadgerList() {
    const badgers = useBadgers();
}

和

// ../reducers/badgers.js
export const useBadgers = () => useSelector(state => state.badgers);