环境说明

redux版本：4.0.0
redux官网：https://redux.js.org/
redux仓库：https://github.com/reduxjs/redux
redux视频：https://egghead.io/courses/getting-started-with-redux
redux示例：https://redux.js.org/introduction/examples

redux要点回顾

Redux是什么？

Redux 是JavaScript 应用的状态管理容器，提供集中式、可预测的状态管理。

Redux出现的动机？

Web应用越来越复杂，需要管理的应用状态越来越多；
应用的状态在什么时候，由于什么原因，如何变化已然不受控制；
我们总是将两个难以理清的概念混淆在一起：变化和异步；

Redux核心概念？

Store：保存应用程序State数据的地方；
Action：JS普通对象，用于描述一个事件以及必要参数，是改变 State 的唯一办法；
Reducer：纯函数，用于根据Action完成 State 状态的修改；
Middleware：Action到达Reducer前需经过的“管道”，用于Action预处理（例：异步管理、日志记录）；

Redux与React的关系？

Redux是一个独立的状态管理容器，本身与React没什么关系；如果想用Redux作为React应用的状态管理器，需要借助react-redux组件建立Redux与React间的联系

redux源码分析

文件整体结构分析

utils/isPlainObject.js:工具函数，判断是否是简单对象（通过 {} 或 new Object构造的对象）
utils/warning.js:工具函数，用于向控制台打印警告信息；
utils/actionTypes.js:供Redux内部使用的2个Action常量定义；
applyMiddleware.js:Redux官方附带一个的Store增强器，用于扩展、增强Store的dispatch函数功能（例：日志记录[redux-logger]、异步管理[redux-thunk、redux-promise、redux-saga]等...）;
compoese.js:函数式编程的经典案例，用于从左到右组合函数；applyMiddleware内部使用compose串联多个middleware组件；如果我们需要用到多个Store增强器，也需要借助compose进行合并、串联；
combineReducers.js:稍微复杂点的应用就不可能只写一个Reducer，它能帮助我们将一堆小Reducer合并为一个大Reducer；
bindActionCreators.js:函数式编程的又一范例，用于组合dispatch和actionCreators，看后面的例子就知道了..
createStore.js:Redux的核心了...
index.js:Redux项目入口，定义了Redux的外部接口；

index.js

index.js是redux统一导出对外的接口的地方，包含：

createStore
combineReducers
bindActionCreators
applyMiddleware
compose
注：在index.js中统一导出分散在各目录中的子模块，这样使用者无论需要用到什么模块，只需从统一的位置import，无需记忆各子模块的实际位置；值得借鉴

utils/isPlainObject.js

判定一个JS对象是不是PlainObject；

utils/warning.js

向控制台输出警告信息的工具类；

进入重头戏之前先来看一个Redux小例子回顾一下Redux核心工作流

bindActionCreators.js

store.dispatch( actionCreator(...) )是我们向Redux发送Action的一般方式，但这要求我们未来在发送Action时，既要引用到store对象又要引用actionCreator，耦合度高；bindActionCreators就是把store.dispatch与actionCreator绑定在一起的工具；
示例：