• 对于react-redux的理解


    一、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.函数名()
  • 相关阅读:
    JAVA基础集合(二)
    JAVA基础XML的解析
    JAVA基础集合(一)
    JAVA基础网络编程
    JAVA基础File类
    JAVA基础IO流(二)
    JAVA基础JDBC二(常用的开源工具)
    JAVA基础异常
    JAVA基础JDBC(一)
    JAVA基础反射
  • 原文地址:https://www.cnblogs.com/Leslie-Cheung1584304774/p/10734654.html
Copyright © 2020-2023  润新知