学习React有一段时间了，但对于Redux却不是那么理解。网上看了一些文章，现在把对Redux的理解总结如下
从需求出发，看看使用React需要什么
1. React有props和state
props => 父级分发下来的属性
state => 组件内部可以自行管理的状态
React有个特点就是，它没有数据向上回溯的能力，也就是说数据只能单向向下分发，或者自行内部消化
2. 构建的一个React组件内部可能是一个完整的应用, 它自己可以工作的很好。 但是你会发现React根本无法让两个组件互相交流，使用对方的数据. 这个时候如果不通过DOM沟通(也就是React体制内)， 解决的唯一办法就是提升state, 将state放到共有的父组件中来管理，再作为props分发回子组件.
3. 如果子组件需要改变父组件的state，也就是说，要从下往上改变state，有没有办法呢
唯一的办法，只能是通过onClick触发父组件声明好的回调，也就是说，父组件提前声明好函数或者方法作为契约描述自己的state将如何变化,再将它同样作为属性props交给子组件使用
这样就是一个模式, 数据总是单向从顶层向下分发，只有子组件回调在概念上可以回到state顶层影响数据，这样state在一定程度上是响应式的
4. 针对上面的情况和理解，最容易的开发方法，就是把所有的state集中放到所有组件顶层，然后分发给所有组件
5. 为了更好的管理所有的state, 我们可能就需要一个库来作为更专业的顶层state分发给所有的React应用, 这个就是Redux了。
根据上面的需求，我们结合Redux的三大要素来一起看看:
a. 需要回调通知state(等同于回调函数) => action
b. 需要根据回调处理(等同于父级方法) => reducer
c. 需要state(等同于总状态) => store
上面的action, reducer 和 store就是Redux的三大要素 (Redux三剑客： action, reducer, store)
a. action是纯声明式的数据结构，只提供事件的所有要素，不提供逻辑
b. reducer是一个匹配函数，action的发送是针对全局发送. 所有的reducer都可以捕捉到并匹配与自己相关与否。 相关就拿走action中的要素进行逻辑处理，修改store中的状态，不相关就不对state做处理原样返回.
c. store负责存储状态并可以被react api回调，发布action
当然一般不会直接把两个库拿来用，在React和Redux之间还有一个binding叫做react-redux, 提供一个Provider和connect :
a. Provider是一个普通组件，可以作为顶层app的分发点，它只需要store属性就可以了。 它会将state分发给所有被connect的组件，不管它在哪里，被嵌套多少层
b. connect是一个科里化函数， 意思是先接受两个参数(数据绑定mapStateToProps和事件绑定mapDispatchToProps), 再接受一个参数(将要绑定的组件本身)
mapStateToProps: 构建好Redux系统的时候，它会被自动初始化，但是你的React组件并不知道它的存在，因此你需要分拣出你需要的Redux状态，所以你需要绑定一个函数，它的参数是state，简单返回你关心的几个值
mapDispatchToProps: 声明好的action作为回调，也可以被注入到组件里，就是通过这个函数，它的参数是dispatch，通过redux的辅助方法bindActionCreator绑定所有action以及参数的dispatch，就可以作为属性在组件里面作为函数简单使用了，不需要手动dispatch。这个mapDispatchToProps是可选的，如果不传这个参数redux会简单把dispatch作为属性注入给组件，可以手动当做store.dispatch使用。这也是为什么要科里化的原因。
在这里，再次理解单向数据流，就是当用户进行操作的时候，会从组件发出一个action, 这个action流到store里面，触发store对存储在store里面的状态进行改动，然后store又触发组件基于新的状态来重新渲染.
这样的话，通过这个流程，任何状态的变化都必须通过action触发，而action又必须通过dispatcher（调度）走，所以整个应用的每一次状态变化都会从同一个地方流过.
React中一直强调的一点就是 "理解你的应用的状态变化是很困难的(managing state changing over time is hard)", 通过redux, 可以让所有的状态变化都必须留下一笔记录，这样就可以利用这个来做各种debug工具，历史回滚等.
首先要明白Redux的单一状态树的概念，所谓的单一状态树, 就是指“所有的state都以一个对象树的形式存储在一个单一的store中”
比如我们有这么一个状态树 (或者你叫它状态对象)
{ text : 'Hello China' }
这个状态树就只有一个节点text, 可以用来描述页面中某个文本的内容，比如说一个p标签
<p>Hello China</p>
当把这个状态树改变之后，比如改为如下
{ text: 'Hello New Zealand' }
那么文本view中对应的p标签内容也会跟着改变
<p>Hello New Zealand</p>
这里就有Redux最基础也是最重要的一个概念
"页面中的所有状态or数据， 都应该用这种状态树的形式来描述； 页面上的任何变化，都应该先去改变这个状态树，然后再通过某种方式实现到页面上"
或者换句话说， 就是用单个对象去描述页面的状态，然后通过改变这个对象来操控页面
按照这个逻辑，我们来再次理解Redux中的三剑客 Action, Reducer, Store
一. Action
Action的任务是描述 "发生了什么事情"
上面的例子中我们把text从 “Hello China” 变成了 "Hello New Zealand", 那么我们就应该用一个Action对象来描述我们的行为
function changeText(){ return{ type: 'CHANGE_TEXT', newText: 'Hello New Zeland' } }
这个函数会返回一个Action对象，这个Action对象里描述了"页面发生了什么"， 随后这个对象会被传入到Reducer中
二. Reducer
Reducer 的任务是根据传入的Action对象去修改状态树
也就是说，根据传入的当前的state和action, 返回一个新的state
(state,action) => newState
上面的例子中，Reducer应该是这样的:
const initialState = { text: 'Hello China' } function Reducer(state=initialState, action){ switch(action.type){ case 'CHANGE_TEXT': return{ text: 'Hello New Zealand' } default: return state; } }
三. Store
Store就是把Reducer和action联系到一起的对象。 Store主要是干以下几件事情:
维持应用的state
提供getState()方法来获取state
提供dispatch(action)方法来更新state
通过subscribe(listener)注册监听器
还是以上面的例子为例，会产生一个这样的Store
import {createStore} from 'redux'
//这里的Reducer就是上面第一步中的Reducer函数
let store = createStore(Reducer)
然后我们通过store的dispatch方法，dispatch上面那个action来改变store的状态
store.dispatch( changeText() ); store.getState(); // {text: 'Hello New Zealand'}
有个概念必须强调： Redux和React之间没有什么太大的关系。 Redux可以搭配React使用，也可以搭配Angular 甚至是纯JS使用。但我们发现React 和 Redux搭配使用非常普遍，这是因为React允许开发人员以State的形式来描述界面, 而Redux非常擅长控制state的变化
Redux和React结合使用，需要使用redux-react库
网上有一个很形象的例子：小明发现家里客厅的家具摆放不合理，都放在错误的位置上，弄的客厅有些乱。于是小明叫了3个朋友来帮助他一起把客厅的家具重新摆放，小明给他的3个朋友分别分配了任务。 现在我们根据这个实际生活中例子来说明Redux的三剑客 Store,Action,Reducer 和 React之间的关系
实际生活中的例子:
小明发现客厅家具摆放不合理 ---> 画出新的摆放图 ---> 小明给他3个朋友分配任务 ---> 3个朋友开始干活，搬放家具 ---> 客厅家具布局改变
我们把这个例子， 用React和Redux中的三剑客Store,Action,Reducer来表示
View(React) = 客厅家具的摆放在视觉的效果上
Store(State) = 每个家具在客厅空间内的坐标（比如客厅沙发的位置 x:10 y:400）
Action = 小明给他3个朋友分配任务(谁应该干什么)
Reducer = 具体任务都干些什么活(把电视搬到沙发正对面然后靠墙的地方)
所以这整个过程是这样的
View ---> Action ---> Reducer ---> Store(state) ---> View
也就是说，首先Store(state)决定了View, 然后用户与View的交互会产生Action,这些Action会触发Reducer因而改变State, 然后State的改变又造成了View的变化
在文章的最后，总结一下Redux的基础也是重要的概念
1.Redux的核心是三剑客中的Store
2. Store 是一个JavaScript对象，通过Redux提供的createStore(reducers)方法创建
3. Store有两个核心方法: .getState() 和 .dispatch()
4. getState()返回一个JavaScript对象，代表Store当前的状态
5. dispatch()接受一个action作为参数, 将这个action调度分发给所有订阅了更新的reducer
6. 三剑客中的Action是一个JavaScript对象，一般包含type,payload等字段, 用于描述发生的事件及相关信息
7. Reducer是一个JavaScript函数, 函数签名(previousState,action) => newState, 即接受previousState和action两个参数，根据action中的内容对previousState进行更改，返回一个新的state