将 Redux Store 连接到 React 组件的下一代方法

旧实现

获取 Redux Store 数据

调度动作

与……的比较connect

总结

感谢阅读

Redux是React 应用程序中广泛使用的状态管理解决方案之一。尽管它有很多优点，但使用Redux 的一个主要痛点是需要编写大量的样板代码才能完成设置。

更麻烦的是，必须使用connect函数来映射状态并分派到React 组件的 Props中。本文将向您展示如何使用Hooks更好地使用Redux Store中的数据。

旧实现

将Redux Store连接到React 应用程序的旧方法实现用于connect将商店react-redux的选定部分添加为组件 props：

const mapStateToProps = (state) => ({
    // select the parts of the state required, for example:
    // counter: state.counter.count
})

const mapDispatchToProps = (dispatch) => ({
    // create the required functions by dispatching actions, for example:
    // increment: () => dispatch(actions.increment())
})

export default connect(mapStateToProps, mapDispatchToProps)(Component)

如你所见，仅仅为了获取必要的数据和函数就需要大量的代码。现在让我们看一个更优雅的解决方案。

获取 Redux Store 数据

通过引入Hook ，获取Redux Store 数据变得非常简单。现在你可以使用 Hook 直接获取React 组件内部的 store 数据。useSelector

import { useSelector } from 'react-redux'

const Component = () => {
    const counter = useSelector((state) => state.counter.count)

    // ...
}

export default Component 

调度动作

useSelector 就像hook一样，也有一个hookdispatch。useDispatch使您可以访问React Component内的Redux Dispatch函数，从而允许您从Component内的任何位置分派操作。

import { useDispatch } from 'react-redux'

const Component = () => {
    const dispatch = useDispatch()
    // For Example:
    // const increment = () => dispatch(actions.increment())
    // ...
}

export default Component 

与……的比较connect

Hooks显然是React的未来，React敦促开发人员使用功能组件而不是类组件，但比较两者很重要，因为根据用例，一种方法可能比另一种方法更好。

正如你所见，两种方法各有优缺点。最好使用最适合你用例的方法。

注意：您仍然需要设置Redux样板，以便将hooks与React配合使用，从而允许您使用Hooks访问 store。此方法仅减少了连接逻辑的额外代码。

总结

在本文中，我们介绍了一种将Redux Store 连接到React 组件的替代方法。我们还讨论了这种新方法的优缺点，以及它如何帮助开发人员。希望这能对您的React开发之旅有所帮助！:)

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。