react-redux 使用

redux和react-redux是两个东西,redux是单独的一个组件,它可以跟其他的框架配合使用,包括Vue,但Vue有更好的Vuex。而react-redux是专门为react所开发的。

1.下载

npm install --save react-redux;  
npm i -S react-redux;

2.引入

import {Provider} from "react-redux"; 
import store from "../store"

3.使用

//1.将跟组件包起来,进行内容的分发,同时也省下了每个子组件都要引入store的问题
<Provider store={store}></Provider>  

//2.将子组件包起来,使UI组件成为容器组件
import {connect} from "react-redux"; //先引入这个组件
//导出时使用connect()方式导出
-----------------------------------------------------------
export default connect()(Navbar)  //Navbar为要导出的组件
注:上述connect()(Navbar)有些复杂,为帮助理解,贴出大概实现原理
function connect(){
    return function(Navbar){
        return class Connect extends Component{
        ...subscribe ..dispatch  //中间代码省略
        render(){
            return <Navbar />
            }
        }
    }
}
-----------------------------------------------------------

完整写法,订阅消息

export default connect(
    (state)=>{  //state传来的就是订阅里的getState()方法得到的
        return{
            title:state.title  //对应的名字
        }
    },  //将store中的状态映射成属性
null  //第二个参数,返回空
)(Navbar)  

this.props.title  //取得title信息只需要通过父传子就可以

未完、、

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1入口文件 引入 主组件 创建stroe 并且把reducers 传入到store import React fr...
    麦子_FE阅读 416评论 0 0
  • redux就是一个数据管理工具action ---数据层,公共约定reducer --根据dispatch发布更...
    马贞晓阅读 695评论 2 2
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 180,185评论 25 708
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 14,473评论 2 59
  • 最初的梦,创造出了不存在的人; 在梦中又梦到,和这个人扯上了复杂的关系; 第三层梦里,却是日常中的小事
    AJI米阅读 267评论 0 0

友情链接更多精彩内容