1. 背景
在前面文章了解中，我们了解到redux是用于数据状态管理，而react是一个视图层面的库如果将两者连接在一起，可以使用官方推荐react-redux库，其具有高效且灵活的特性react-redux将组件分成：
- 容器组件：存在逻辑处理
- UI组件：只负责现显示和交互，内部不处理逻辑，状态由外部控制
通过redux将整个应用状态存储到store中，组件可以派发dispatch行为action给store其他组件通过订阅store中的状态state来更新自身的视图
2. 如何做
使用react-redux分成了两大核心：
- Provider
- connection
2.1 Provider
在redux中存在一个store用于存储state,如果将这个store存放在顶层元素中，其他组件都被包裹在顶层元素之上
那么所有的组件都能够受到redux的控制，都能够获取到redux中的数据
使用方式如下
<Provider store = {store}>
<App />
<Provider>
2.2 connection
connect 方法将 store 上的 getState 和 dispatch 包装成组件的 props导入 conect 如下：
import { connect } from "react-redux";
用法如下
connect(mapStateToProps, mapDispatchToProps)(MyComponent)
可以传递两个参数：
- mapStateToProps
- mapDispatchToProps
2.3 mapStateToProps
把 redux中的数据映射到 react 中的 props 中去如下
const mapStateToProps = (state) => {
return {
// prop : state.xxx |意思是将 state中的某个数据映射到props中
foo: state.bar
}
}
const mapStateToProps = (state) => {
return {
// prop : state.xxx |意思是将 state中的某个数据映射到props中
foo: state.bar
}
}
组件内部就能够通过 props 获取到 store 中的数据
class Foo extends Component {
constructor(props){
super(props);
}
render(){
return(
// state.bar
<div>this.props.foo</div>
)
}
}
Foo = connect()(Foo)
export default Foo
2.4 mapDispatchToProps
将redux中的dispatch映射到组件内部的props中
const mapDispatchToProps = (dispatch) => { // 默认传递的参数就是dispatch
return {
onClick: () => {
dispatch({
type: 'increatment'
});
}
};
}
class Foo extends Component {
constructor(props){
super(props);
}
render(){
return(<button onClick = {this.props.onClick}> increase</button>)
}
}
Foo = connect()(Foo);
export default Foo;
