当Redux 和React 相接合，就是使用Redux进行状态管理，使用React 开发页面UI。相比传统的html, 使用React 开发页面，确实带来了很多好处，组件化，代码复用，但是和Redux 接合时，组件化却也带来了一定的问题，组件层层嵌套，有成千上百个，而store确只有一个，组件中怎么才能获取到store? 页面UI就是显示应用程序状态的，如果获取不到store中的state, 那就没法渲染内容了。还有一个问题，就是如果状态发生了变化，组件怎么做到实时监听，实时显示最新的状态？
对于第一个问题，React组件中怎么获取到store，你可能想到了, 在整个应用程序的最外层组件中把store 作为props 层层向下传递，对于一个小程序，还可以接受， 但对于一个大型程序呢，不可能成千上百个组件中都写上store 属性吧。还有一个解决方案就是context, 把所有组件包含在一个context中，context 提供store 属性，这样就不用层层传递，且所有的组件都会获取到store.，方案可以一试
对于第二个问题，组件内部想要实时显示最新的状态，那就要使用store.subscribe() 方法，在其里面注册监听函数，获取最新状态，然后注入到组件中，组件更新的方法，就是调用setState() 方法，那我们的每一个组件都变成了有状态的组件。那store.subsribe() 方法，什么时候注册监听函数，必须组件加载完就要注册，componentDidMounted 里调用store.subscribe().
根据以上两点分析，尝试写一下代码，看不能能实现Redux和React 的接合，使用create-react-app 创建项目react-redux-demo，然后 cd react-redux-demo && npm i bootstrap redux --save，安装boostrap 和redux。 打开项目，在index.js 中引入boostrap.
import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import 'bootstrap/dist/css/bootstrap.css'; // 添加bootstrap 样式ReactDOM.render(, document.getElementById('root'));
还是最简单的加减counter 开始，点击add 加1， 点击minus 减1， 点击reset 重置。看一下Redux, 由于Redux 就是action, reducer, store，和React 一点关系都没有，所以完全把创建action，创建stroe的内容写成单独的文件，只暴露出React需要的东西给它调用就好了。React 需要store, 需要action, 因为它要dispatch action来改变状态。简单起见，把redux的有关内容都放到一个文件中，在src目录下新建一个文件redux.js
import {createStore} from 'redux'; // state const initialState = { counter: 5 };// action const add = { type: 'ADD' };const minus = { type: 'MINUS' };const reset = { type: 'RESET' };// reducerfunction counter(state = initialState, action) { switch(action.type) { case 'ADD': return { ...state, counter: state.counter + 1 } case 'MINUS': return { ...state, counter: state.counter - 1 } case 'RESET': return { ...state, counter: 5 }; default: return state; }}// 创建storeconst store = createStore(counter);// export 出去store 和 actionexport {store, add, minus, reset}; 现在就要写React，创建页面ui, 先不管交互，先把页面三个按钮和状态的显示画出来，在src下创建一个ThreeButton.js,
import React, { Component } from 'react'export default class ThreeButton extends Component { render() { return ( 0
) }} 然后在App.js中引入
import React from 'react';import ThreeButton from './ThreeButton';function App() { return ( 准备实现React和Redux的接合，实现页面的交互。首先就是要把store 注入到React中，使用React 的context api. context使用的最开始，是使用createContext创建一个context, 在src 目录下新建一个storeContext.js
import React from 'react';
const storeContext = React.createContext({store: {}}) export {storeContext}; storeContext 有一个属性Provider， 它是一个组件，有一个value属性，提供真正的组件共享数据，这里就是Redux 创建的store 了。然后用Provider 把组件包起来，该组件和它的子组件都能够获取到共享数据，那就把App 包起来， 那就在index.js中把Redux的store和storeContext.js 引入
import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import 'bootstrap/dist/css/bootstrap.css'; // 添加bootstrap 样式import { store } from './redux'; // 引入 store // 提供sotre 作为共享数据，App及其子组件都能获取到storeconst Provider =ReactDOM.render(Provider, document.getElementById('root'));
那ThreeButton.js 就可以获取到store, 那具体是怎么获取到store的呢？首先还是引入storeContext， 然后在类中加一个静态属性contextType, 它赋值为storeContext, 然后组件中就可以使用this.context 获取到store 了。
import React, { Component } from 'react';import { storeContext } from './storeContext'; // 引入storeContextexport default class ThreeButton extends Component { static contextType = storeContext; // 加静态属性contextType, 赋值为storeContext componentDidMount() { let {store} = this.context; // this.context 获取到store console.log(store); } render() { return ( 0
) }} 可以看到控制台打印出了store. 组件终于获取到store， 那就要从store中获取state，注入组件中，那组件就要声明一个状态 allState 来接收store中的state, 同时在componentDidMounted 的时候，调用setState 给它赋值
static contextType = storeContext; // 加静态属性contextType, 赋值为storeContext state = { allState: {} } componentDidMount() { let {store} = this.context; // this.context 获取到store this.setState({ allState: store.getState() }) } 把h1 中0 改为从状态获取
{ this.state.allState.counter}
页面中显示为5，没有问题，表明从store中获取的状态没有问题。那就要给三个按钮添加click 事件了，dispatch action 来改变状态，那就添加三个函数。首先从redux.js中引入三个action , 然后声明三个函数dipatch action， 最后就是给按钮添加上click 事件。
import { add, minus, reset } from './redux';..... add = () => { let {store} = this.context; store.dispatch(add); } minus = () => { let {store} = this.context; store.dispatch(minus); } reset = () => { let {store} = this.context; store.dispatch(reset); }... 点击了按钮，页面的状态并没有刷新，那就是没有subscribe 监听状态的改变， 还是在componentDidMounted 页面里面调用store.subscribe，它的回调函数也很简单，就是获取状态，调用setState()
componentDidMount() { let {store} = this.context; // this.context 获取到store this.setState({ allState: store.getState() }) store.subscribe(() => { this.setState({ allState: store.getState() }) }) } 至此，react 和redux 算是接合成功了。整个threeButton.js 如下
import React, { Component } from 'react';import { storeContext } from './storeContext'; // 引入storeContextimport { add, minus, reset } from './redux';export default class ThreeButton extends Component { static contextType = storeContext; // 加静态属性contextType, 赋值为storeContext state = { allState: {} } componentDidMount() { let {store} = this.context; // this.context 获取到store this.setState({ allState: store.getState() }) store.subscribe(() => { this.setState({ allState: store.getState() }) }) } add = () => { let {store} = this.context; store.dispatch(add); } minus = () => { let {store} = this.context; store.dispatch(minus); } reset = () => { let {store} = this.context; store.dispatch(reset); } render() { return ( { this.state.allState.counter}
) }} 现在回想一下组件中获取store, dipatch aciton ,和实现实时监听的步骤， 你会发现当我们再创建另外一个组件的时候，它也有好多相同的步骤 ，
1 ，添加静态属性contextType，使我们整个组件都能够获取到store， 肯定相同
2， 添加state来接受store中的state， 肯定相同。
3，componentDidMounted 下获取state ，监听state， 肯定相同
4， dispatch action， 这个几乎不相同，因为每一个组件触发的action 不同
5，render state, 就是页面的ui, 这个也几乎不同。
我们可以把这个组件分为三个部分，相同的部分不动，那不同的部分要怎么处理？对于不同的部分，通常都是使用函数，不同的部分通过传参的形式传递进来，那就要写一个函数，返回这个组件。由于action 和ui 是两个不同类型的东西，可以分为两种不同的参数，那这个函数接受action 返加一个函数，返加函数再接受一个ui 组件，再返回一个组件，这个组件包含相同的部分。相当于
function connect(action) { return function(Componnet) { return class extends React.componnet { // 相同的部分 render() { return 只要把这个函数封装起来，以后直接调用这个函数，就实现了组件自动获取到store, 自动监听变化，我们只要写ui 和action，然后传递进去就可以了。这个函数其实第三方组件已经封装好了，那就是react-redux 库，它提供了一个connect方法, 看一下它的api, 最常用的就是下面的方式
connect(mapStateToProps, mapDispatchToProps)(MyComponent)。
和我们自己写的connect 函数使用方法一致， 只不过它的第一个函数可以接受更多的参数，mapStateToProps, 把state 转化成props，因为connect 返回的组件中能够获取到store中的state, 它要把state 传递给myComponnet, 因为myCompoent 才是负责渲染ui, 对于myComponnet 来说，它就是props. 同理也适用于mapDispatchToProps, 在connect的组件它是能获取到store中的dispatch, 当传递给myComponent的时候，它就变成了Props. 再看一下这两个参数怎么使用，首先它们是函数，然后返回对象。 为什么要这样设计呢？只有函数，才能调用，才能通过参数把state和disptch 进行注入，返回对象，便于对象的合并，把所有对象进行合并，形成props 传递给myComponnet.
对于mapStateToProps 来说，它接受一个state作为参数，返回一个对象，这个对象中的属性就可以在myComponet中使用props 进行获取并使用，值呢？就是 参数state中的属性，myComponent 组件要用到state中的哪个属性，就读取state中的哪个属性作为参数。
const mapStateToProps = state => ({ counter: state.counter}) mapDispatchToProps，则相对麻烦一点，它接受一个dispatch 作为参数，返回的对象中属性也是可以在myComponet中使用props 进行获取并使用，值呢，是一个函数，参数可以接受也可以不接受，函数体则是dispatch action
const mapDispatchToProps = dispatch => ({ add: () => dispatch({type: 'ADD'})}) React-Redux 除了connect 函数外，还提供了Provider 组件，和我们自定义的storeContext.Provider 一致，不过它的使用方式是直接提供属性，组件身上的属性都能被子组件获取到。npm i react-redux --save 使用react-redux 重写组件。
首先把storeContext.js 文件去掉，然后在index.js中从React-Redux引入Provider 组件，包含App
import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import 'bootstrap/dist/css/bootstrap.css'; // 添加bootstrap 样式import { store } from './redux'; // 引入 storeimport { Provider } from 'react-redux';// 提供sotre 作为共享数据，App及其子组件都能获取到storeconst ProviderWrapper = ReactDOM.render(ProviderWrapper, document.getElementById('root')); 然后ThreeButton.js 就要分为两部分了，一个部分是connect 函数中的第一部分connect(mapStateToProps, mapDispatchToProps), 主要的作用就是把store 获取，转化为props.
另一部分是connect的第二部分myComponent, 它呢，就是接受到props, 渲染组件。 在一个文件中也可以，分两个文件也没有问题。我们就在一个文件中写了，
import React from 'react';import { add, minus, reset } from './redux'; // 纯渲染组件function ThreeButton(props) { return ( {props.counter}
)}// 把store中的state 转化为纯渲染组件propsconst mapStateToProps = state => ({ counter: state.counter})// 获取store中的dispatch，同时和action接合，组成纯渲染组件props，渲染组件中,直接调用对象的属性，就可以dispatch action 了const mapDispatchToProps = dispatch => ({ add: () => dispatch(add), minus: () => dispatch(minus), reset: () => dispatch(reset)})// connect 函数把它们接合起来，ThreeButton就可以使用props来使用mapStateToProps和mapDispatchToProps中返回的对象属性// 同时返回一个组件，可以在父组件App.js 中直接调用export default connect( mapStateToProps, mapDispatchToProps, )(ThreeButton)