react-redux的作用是什么

这篇文章主要介绍了React-redux的作用是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇react-redux的作用是什么文章都会有所收获，下面我们一起来看看吧。

“react-redux”的作用：1、将组件分为了容器组件和UI组件；2、取代redux中的“store.subscribe”监听组件的状态变化，用于渲染组件；3、配合redux使用，使组件轻松的拿到全局状态，方便组件间的通信。

本教程操作环境：windows10系统、react17.0.1版、Dell G3电脑。

react-redux有什么用

react-redux配合redux使用，将redux定义的store数据注入到组件中，可以使组件轻松的拿到全局状态，方便组件间的通信。使react组价与redux数据中心（store）联系起来，调用dispatch函数修改数据状态后，触发通过subscribe注册更新视图的处理逻辑，包括需要渲染的数据和更新数据的函数。

它主要用于在入口处包裹需要用到Redux的组件。本质上是将store放入context里。

因为redux和组件的耦合度太高，为了解耦，所以设计了redux。一旦我们引入了react-redux，我们便不再需要使用store的subscribe自己去订阅状态了。UI组件就像普通组件一样内部没有redux的身影。可读性更高。

作用1

将组件分为了容器组件和UI组件，UI组件通过props来获取状态和操作状态的方法。

作用2

通过Provider组件来取代redux中的store.subscribe来监听组件的状态变化，用于渲染组件。

作用3

在容器组件中通过核心api connect来连接UI组件和redux，connect是一个高阶函数，第一个参数接收的是两个回调函数，回调函数1：将接收一个state，然后返回一个对象对象中包含了UI组件想要的状态。回调函数2：接收一个dispatch，返回一个对象，对象中包含了UI组件想要操作状态的方法。同时还有一个简写方法，就是第二个参数直接传入一个对象，该对象包含操作状态的方法。（核心：就是将state和dispatch映射到UI组件的props中）

核心代码

export default connect(
    state => ({count: state}),
    dispatch => {
        return {
            increment: number => dispatch(increment(number)),
            decrement: number => dispatch(decrement(number)),
        }
    }
)(Counter)

下面是简写形式

export default connect(
    state => ({count: state}),
    {increment,decrement}
)(Counter)

关于“react-redux的作用是什么”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“react-redux的作用是什么”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网html频道。