对于react-redux的理解

时间：2021-05-15 16:42:36
一、redux与组件

React-Redux提供connect方法,用于从UI组件生成容器组件

二、react-redux的基本使用

1.引入

import {Provider} from "react-redux"

在根组件外层嵌套一个Provider。Provider的作用就是将store传递给每一个子组件，每一个子组件就都可以使用store了，不需要重复地在组件中引入store

2.connect进行连接

（1）在子组件中引入connect

import {connect} from "react-redux"

（2）进行连接

export default connect(mapStateToProps,mapDispatchToProps)(组件名称)

（3）connect()()

第一个括号内有三个参数：

    第一个参数：mapStateToProps：把store里的state映射到当前组件的props中

    第二个参数：mapDispatchToProps：

    1）该方法用来修改数据，其中有一个参数为dispatch

    2）该方法提供了一些方法来进行数据的修改（需手动书写方法，依旧要把action返回给Store），该方法被映射到了this.props中。dispatch是用来发送action的。

第二个括号：绑定的组件名称

三、mapStateToProps

1.作用：建立一个从外部state对象到UI组件的props对象的映射关系。

2.mapStateToProps会订阅Store，每当state更新时，就会自动执行，重新计算UI组件的参数，从而触发UI组件的重新渲染。调用时通过this.props.[key值]来使用。

四、mapDispatchToProps

1.作用：用来建立UI组件的参数到store.dispatch方法的映射。即它定义了哪些用户的操作应该当做Action传给Store。它可以是一个函数，也可以是一个对象。

2.用法：

const mapDispatchProps = (dispatch)=>({

    函数名称:function(){

        dispatch(action)

    }

})

mapDispatchProps函数需要返回出去一个函数,这个函数中用dispatch传递一个action

最终子组件变成了UI组件,connect返回最终的容器组件，react-redux建议我们把所有的数据都放在store中

3.调用：this.props.函数名()

相关文章