什么是 react-redux ？
react-redux是用来配合Redux的插件。它使我们的工作得到了简化。但在实际的项目中，需要权衡一下是否使用react-redux。
安装
cnpm i react-redux -S
初始化Redux
配置根元素
在根文件 index.js 中，引入 Provider ，用它包裹根组件，并传入 store
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
// 引入生产者 Provider
import { Provider } from 'react-redux'
import store from './store'
ReactDOM.render(
// 用 Provider 包裹根组件App，并传入 store 以供所有组件使用
<Provider store={store}>
<App />
</Provider>
, document.getElementByID("root")
);
组件中使用公共状态 state
引入 connect 高阶组件
-
在导出组件时用 connect 对组件进行加工
connect 高阶组件做了柯里化处理，即函数嵌套函数。第一个函数的参数为自己定义的
mapStateToProps和mapDispatchToProps，第二个函数的参数为被加工的组件名 -
定义
mapStateToProps函数mapStateToProps可以将 state 映射到组件的参数props身上。（映射即为双向响应，有了它我们可以省略订阅更新视图函数的步骤） 通过
this.props取值
import React,{ Component } form 'react'
// 引入 connect 高阶组件
import { connect } from 'react-redux'
class App extends Component{
render(){
return (
<div>
{/* 在this.props身上获取公共状态state中的数据 */}
<h2>{this.props.n}</h2>
</div>
)
}
}
// 定义映射数据的函数，返回一个对象
const mapStateToProps = (state)=>({
// 在此定义的值会从公共状态 state 映射到 this.props 身上
n:state.n
})
//用 connect 对组件进行加工
export default connect(mapStateToProps)(App)
组件中修改 state
-
在
connect高阶组件调用时，传入函数mapDispatchToProps(将dispatch映射到props上)函数
mapDispatchToProps可以获取dispatch方法，并将函数内写入的方法映射到this.props当中。 -
在
mapDispatchToProps中，写入修改公共状态的事件函数mapDispatchToProps 中的参数即为
dispatch，可直接用它来派发action，而不用引入store。将组件中的方法都写到 mapDispatchToProps 中，还会帮我们实现 UI层和逻辑层的分离。 -
绑定事件
由于事件函数经过
mapDispatchToProps处理，所以用this.props.事件名来调用 不用再进行试图更新的订阅！！！
mapStateToProps已经帮我们做了映射！
import React,{ Component } form 'react'
import { connect } from 'react-redux'
class App extends Component{
render(){
return (
<div>
<h2>{this.props.n}</h2>
<button onClick={this.props.handleAdd.bind(this)}>点击增加</button>
</div>
)
}
}
const mapStateToProps = (state)=>({
n:state.n
})
const mapDispatchToProps = (dispatch)=>({
handleAdd(){
let action = {
type:"NUM_ADD"
}
dispatch(action);
}
})
// 在connect中传入函数 `mapDispatchToProps`
export default connect(
mapStateToProps,
mapDispatchToProps
)(App)
接下来按照Redux的正常流行走即可。
神奇的事情发生了
解决了频繁引入
store的问题，一次引入，全体使用-
解决了UI层与逻辑层混在一起的问题，自动将组件分离成了一个 UI组件 和一个 容器组件
将组件拆分成两个的结构：外面是一个容器组件，里面包了一个UI 组件。容器组件负责与外部的通信，将数据传给UI组件，UI组件则负责渲染出视图。
解决了每次都要进行视图更新的订阅问题，
mapStateToProps自动帮我们做了映射
