react的技术栈一定会遇到redux，而在react中使用redux需要使用react-redux，那么react-redux是怎么包装redux已适用react的呢？

react-redux的原理是什么呢？

带着这些问题，翻看了react-redux的源码，小有收获，写博客以记，方便以后翻阅。

0. 准备

在继续之前先回顾一些redux、react和react-redux必要的知识。

redux

redux用于管理状态，可以响应状态的变化，简单描述下：

redux的createStore函数需要一个返回state的函数作为入参，这个函数被称作reducer。

调用createStore就能够得到一个store。这个store中就存储着state（reducer的返回值），并且可以通过store的subscribe方法来监听state的变化，当然也可以通过store提供的dispatch方法类修改state。

具体API如下：

// store.js
import { createStore } from 'redux'

// 3. 下面store每dispatch一次reducer就会重新执行并计算一次state
function reducer(state = {a: 1}, action) {
  const { type, payload } = action
  return payload
}

// 0. 创建一个store
const store = createStore(reducer)

// 1. 监听store中state的变更
store.subscribe((state) => {
  console.log(state)
})

// 2. 发送一个action来通知reducer修改state
// {type: 'type1', payload: 1} 就是一个ation
store.dispatch({
  type: 'type1',
  payload: {a: 2}
})

react

react组件的更新原因可能是组件自身的state更新，组件的props更新，组件依赖的context更新导致的。但是放眼整个react应用的话，组件更新原因只有一个，就是祖先组件或者当前组件的state更新导致的。

react-redux

// App.js
import React, { Component } from 'react'
import { connect } from 'react-redux'

class Example extends Component {
  render() {
    return <div onClick={this.props.dispatchA}>
      	{this.props.a}
      </div>
  }
}

function mapStateToProps(state) {
  return {...state}
}

function mapDispatchToProps(dispatch) {
  return {
    dispatchA() => {
    	dispatch({type: 'type', payload: {a: 10}})
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Example)

上面connect函数的调用返回了一个高阶组件，用高阶组件包裹Example组件之后就完成组件到redux的连接。

入口文件

// index.js
import { Provider } from 'react-redux'
import store from './store'
import App from './App.js'

ReactDOM.render(<Privider store={store}>
    				<App />
               </Provider>)