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信息只需要通过父传子就可以
未完、、
网友评论