1、前言
redux作为一种单向数据流的实现，配合react非常好用，尤其是在项目比较大，逻辑比较复杂的时候，单项数据流的思想能使数据的流向、变化都能得到清晰的控制，并且能很好的划分业务逻辑和视图逻辑。本文主要记录下自己学习redux、react-redux时的理解。
上图展示了redux数据的基本流程，简单的说就是view dispatch一个action后，通过对应reducer处理，然后更新store，最终views根据store数据的改变重新渲染界面。
2、创建store
store就是redux的一个数据中心，简单的理解就是我们所有的数据都会存放在里面，然后在界面上使用时，从中取出对应的数据。因此最开始，我们要创建一个这样的store，redux提供了createStore方法。
export default function createStore(reducer, preloadedState, enhancer) {
...
return {
dispatch,
subscribe,
getState,
replaceReducer,
[$$observable]: observable
}
}
可以看到createStore有三个参数，返回一个对象，里面有我们常用的方法，下面一一来看一下。
（1）、getState
export default function createStore(reducer, preloadedState, enhancer) {
...
var currentState = preloadedState
function getState() {
return currentState
}
...
}
代码只有一行，redux内部通过currentState变量保存当前store，变量初始值即我们调用时传进来的preloadedState，getState()就是返回这个变量
（2）、subscribe
代码本身也不难，就是通过nextListeners数组保存所有的回调函数，外部调用subscribe时，会将传入的listener插入到nextListeners数组中，并返回unsubscribe函数，通过此函数可以删除nextListeners中对应的回调。这里有个小细节是使用了currentListeners和nextListeners两个数组来保存，主要原因是在dispatch函数中会遍历nextListeners，这时候可能会客户可能会继续调用subscribe插入listener，为了保证遍历时nextListeners不变化，需要一个临时的数组保存。
var currentListeners = []
var nextListeners = currentListeners
function ensureCanMutateNextListeners() {
if (nextListeners === currentListeners) {
nextListeners = currentListeners.slice() //生成一个新的数组
}
}
function subscribe(listener) {
if (typeof listener !== 'function') {
throw new Error('Expected listener to be a function.')
}
var isSubscribed = true
ensureCanMutateNextListeners()
nextListeners.push(listener)
return function unsubscribe() {
if (!isSubscribed) {
return
}
isSubscribed = false
ensureCanMutateNextListeners()
var index = nextListeners.indexOf(listener)
nextListeners.splice(index, 1)
}
}
（3）、dispatch
我们知道dispatch一个action后，就会调用此action对应的reducer，从下面源码可以看的很清晰，在调用了currentReducer以后，遍历nextListeners数组，回调所有通过subscribe注册的函数。这样在每次store数据更新，组件就能立即获取到最新的数据
function dispatch(action) {
...
try {
isDispatching = true
currentState = currentReducer(currentState, action) //调用reducer处理
} finally {
isDispatching = false
}
var listeners = currentListeners = nextListeners
for (var i = 0; i < listeners.length; i++) {
var listener = listeners[i]
listener()
}
...
}
（4）、replaceReducer
replaceReducer是切换当前的reducer，虽然代码只有几行，但是在用到时功能非常强大，它能够实现代码热更新的功能，即在代码中根据不同的情况，对同一action调用不同的reducer，从而得到不同的数据。
3、中间件
前面我们分析了createStore方法，通过createStore创建的store已经可以满足基本的分发action、修改store、更新view的功能了。但是仔细思考，对于前端必须用到的异步请求却无能为力，因为dispatch一个异步action时，数据还没有返回，而此时已经调用了currentReducer()方法，这样就没法更新store了。这里就需要用到中间件了。
什么是中间件呢，我的理解是：比如水从自来水厂流到用户的家中，需要经过过滤、消毒、净化等一道道工艺，最终才会到用户的家中，这中间的一道道工艺就可以理解为中间件，每个中间件都可以对水进行一些处理，当然也可以不处理，直接让水流过去。而我们的数据类似于水，中间件就是对数据进行特殊处理的一个个节点。redux提供了applyMiddleware方法，在分析此方法之前，先看下redux中另一个方法，compose。
export default function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
}
funcs = funcs.filter(func => typeof func === 'function')
if (funcs.length === 1) {
return funcs[0]
}
const last = funcs[funcs.length - 1]
const rest = funcs.slice(0, -1)
return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
}
这里有一个数学概念需要知道，叫柯里化函数，什么是柯里化函数，看一个简单的例子
var add = function (a) {
return function (b) {
return a + b;
}
}
var two = add(2)
var three = two(1)
var four = two(2) //与 add(2)(2)效果一样
如果我们定义一般的函数实现加法，那么需要传入两个参数，而add方法每次只传入一个参数，即把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数。
再回过头来看compose就会比较清晰，它类似与上面的two函数，后续每次调用，都与之前传入的2相加。而compose返回的函数，在后续继续调用时，就会遍历调用传入compose的funcs数组，compose就是对传入的funcs数组进行柯里化。理解了这个方法后，再来看applyMiddleware。applyMiddleware的参数就是一系列中间件。通过compose调用每个中间件，并传入原生dispatch方法，然后返回增强后的dispatch方法，最终返回store。由此可见applyMiddleware方法其实就是增强dispatch，这样在使用dispatch时可以让action流过中间件。
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
var store = createStore(reducer, preloadedState, enhancer)
var dispatch = store.dispatch
var chain = []
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
下面来看一下中间件的写法
const funActionThunk = ({ dispatch, getState }) => next => action => {
if (typeof action.payload === 'function') {
return action.payload(dispatch, getState);
}
return next(action);
};
export default funActionThunk;
我们可以来一一看一下中间件的这些参数是从哪里传进来的，首先{ dispatch, getState }是在applyMiddleware中传入的middlewareAPI对象，也就是原始的dispatch和getState对象。next参数其实也是原始的dispatch，就是compose(...chain)(store.dispatch)调用时传入的store.dispatch。action就是我们增强的dispatch分发的action。参数都传入后，我们就可以依据不同的action进行处理了，比如上面的中间件对action.payload进行判断，如果是函数，就直接调用，如果不是，那么调用next，直至最后没有中间件了，此时next就是原始的dispatch（即最初传入的store.dispatch）。
4、bindActionCreators
bindActionCreators方法的目的就是简化action的分发，我们在触发一个action时，最基本的调用是dispatch(action(param))。这样需要在每个调用的地方都写dispatch，非常麻烦。bindActionCreators就是将action封装了一层，返回一个封装过的对象，此后我们要出发action时直接调用action(param)就可以了。
5、react-redux
redux其实是一个通用的库，它不只针对react，还可以用到其它的像vue等库。因此react要想完美的应用redux，还需要封装一层，react-redux就是此作用。react-redux库相对简单些，它提供了一个react组件Provider和一个方法connect。下面的代码是react-redux项目的一般写法。
<Provider store={store} >
<div style={{height: '100%'}}>
<Handler/>
</div>
</Provider>
Provider组件相当于一个外壳，将store传入，并提供getChildContext方法，让后续的子组件可以通过context取到store对象。
connect方法复杂点，它返回一个函数，此函数的功能是创建一个connect组件包在WrappedComponent组件外面，connect组件复制了WrappedComponent组件的所有属性，并通过redux的subscribe方法注册监听，当store数据变化后，connect就会更新state，然后通过mapStateToProps方法选取需要的state，如果此部分state更新了，connect的render方法就会返回新的组件。
export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
...
return function wrapWithConnect(WrappedComponent) {
...
}
}
