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

Question

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

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

Answer 1

这两个connect和useSelector/useDispatch有效的方式与您反应的组分的终极版存储交互。但是，它们有不同的权衡。我在我的文章关于 React Hooks、Redux 和关注点分离的思考以及我在 ReactBoston 2019 上关于Hooks、 HOC和权衡的演讲中谈到了这些权衡。

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

就“优点”而言：React-Redux 的 hooks 需要编写的总代码比connect它少，不添加间接性，并且更容易与 TypeScript 一起使用。

Answer 2

就个人而言，我强烈支持使用钩子，connect()()原因如下：

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

同意钩子的耦合性比connect()()- 如果这对您来说是一个问题，您可以添加一个抽象层：

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

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

和

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