美文网首页
react-redux 使用

react-redux 使用

作者: MissSixty | 来源:发表于2018-10-27 15:21 被阅读0次

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信息只需要通过父传子就可以

未完、、

相关文章

  • react-redux

    使用react-redux,可以更方便的使用redux开发 先install react-redux使用react...

  • 20.redux使用

    react-redux 使用一个react-redux 的库使得redux的使用更简洁,它提供了provider和...

  • react-redux

    redux 全局状态管理 react-redux 优化模块 优化redux的使用过程 通过react-redux ...

  • React-Redux(一):react-redux使用

    react-redux使用步骤如下添加react-redux库 2.创建store 在祖先元素引入provider...

  • 手写connect

    使用react-redux中的 使用的时候 r...

  • 一个完整小巧的Redux全家桶项目

    OneArticle: 使用React-Native开发,使用Redux,React-Redux,Redux-Pe...

  • react-redux框架之connect()与Provider

    react-redux 在react-redux 框架中,给我提供了两个常用的API来配合Redux框架的使用,其...

  • react依赖注入之mapStateToProps&&mapDi

    在react-redux开发中每个模块有自己的state用来统一管理视图数据。在使用react-redux之后,可...

  • React-Redux 使用

    目前使用版本 建议先了解 Redux 的使用!Redux使用(纯Redux使用) React-Redux 是 Re...

  • redux

    单独使用redux redux是核心库 与react配合使用redux 安装react-redux react-r...

网友评论

      本文标题:react-redux 使用

      本文链接:https://www.haomeiwen.com/subject/fcddtqtx.html