## 一、React-redux 简介 参考文章:[react-redux的connect解析](https://segmentfault.com/a/1190000010188279) > 为了方便使用，Redux 的作者封装了一个 React 专用的库 React-Redux。 > 这个库是可以选用的。实际项目中，你应该权衡一下，是直接使用 Redux，还是使用 React-Redux。后者虽然提供了便利，但是需要掌握额外的 API，并且要遵守它的组件拆分规范。 > react-redux 核心： 1. Provider组件：使组件可以通过this.context拿到store值 2. connect方法：当触发交互时，自动更新view层。而不需要我们手动的去用`store.subscribe`订阅render函数以达到更新页面的目的。 ### 1.1 Provider组件 > 一般我们都将顶层组件包裹在Provider组件之中，这样的话，所有组件就都可以在react-redux的控制之下了,但是store必须作为参数放到Provider组件中去 ``` /* 假设有store:{count:0} 实际中：store为通过createStore(reducer) 导出的对象 */ <Provider store = {store}> <App /> <Provider> ``` - 这个组件的目的是让所有组件都能够访问到Redux中的数据。 - 注意：所有组件要使用 store时必须先声明`contextTypes` ``` import {PropTypes} from 'prop-types'; class App extends React.Component{ render(){ const store = this.context.store; //使用 return( <div>store中的数据{store.count}</div> ) } } // 声明 App.contextTypes = { store:PropTypes.object.isRequired } ``` ### 1.2 connect方法 - 作用：将action,state映射到组件的props属性上 ``` connect(mapStateToProps, mapDispatchToProps)(MyComponent) ``` > connect方法一共有4个方法，主要用两个。 #### 1.2.1 mapStateToProps > 字面含义：把state转换为props，意思是把redux中的数据映射到react中的props去，这时组件可以直接通过this.props.name来调用redux中的数据 ``` /*以此reducer为例：初始state为0*/ function counter(state = 0, action) { switch (action.type) { case 'add': return state + 1; case 'dec': return state - 1; default: return state; } } ``` ``` class App extends React.Component{ render(){ //这里直接通过this.props.counter访问state的值 //（参考mapStateToProps中） return( <div>this.props.counter</div>) } } const mapStateToProps=(state)=>{ return { counter:state //默认值为0 } } export default connect(mapStateToProps)(App); # App组件通过this.props.counter获取到初始state值 ``` - 注意mapStateToProps中的state中各state初始值指的是reducer函数名对应的值 #### 1.2.2 mapDispatchToProps > 字面含义：把dispatch映射到Props中 ``` import {connect} from 'react-redux'; import {showStatus,calcAdd,calcDec} from '../redux/actions'; import Test from '../components/Test'; // 映射dispatch到组件props上 const mapDispatchToProps = (dispatch) =>({ showBox:(status)=>{ dispatch(showStatus(status)); }, add:(num)=>{ dispatch(calcAdd(num)); }, dec:(num)=>{ dispatch(calcDec(num)); } }); export default connect(null,mapDispatchToProps)(Test) ```