本篇主要将react全家桶的产品非常精炼的提取了核心内容，精华程度堪比精油。各位大人，既然来了，客官您坐，来人，给客官看茶~~
redux前言
首先，本篇文章要求您对js,react等知识有一定的了解，如果不曾了解，建议您先看一下：React精髓！一篇全概括(急速)
React有props和state:
props意味着父级分发下来的属性
state意味着组件内部可以自行管理的状态，并且整个React没有数据向上回溯的能力，这就是react的单向数据流
这就意味着如果是一个数据状态非常复杂的应用，更多的时候发现React根本无法让两个组件互相交流，使用对方的数据，react的通过层级传递数据的这种方法是非常难受的，这个时候，迫切需要一个机制，把所有的state集中到组件顶部，能够灵活的将所有state各取所需的分发给所有的组件，是的，这就是redux
简介
redux是的诞生是为了给 React 应用提供「可预测化的状态管理」机制。
Redux会将整个应用状态(其实也就是数据)存储到到一个地方，称为store
这个store里面保存一棵状态树(state tree)
组件改变state的唯一方法是通过调用store的dispatch方法，触发一个action，这个action被对应的reducer处理，于是state完成更新
组件可以派发(dispatch)行为(action)给store,而不是直接通知其它组件
其它组件可以通过订阅store中的状态(state)来刷新自己的视图
使用步骤
创建reducer
可以使用单独的一个reducer,也可以将多个reducer合并为一个reducer，即：combineReducers()
action发出命令后将state放入reucer加工函数中，返回新的state,对state进行加工处理
创建action
用户是接触不到state的，只能有view触发，所以，这个action可以理解为指令，需要发出多少动作就有多少指令
action是一个对象，必须有一个叫type的参数，定义action类型
创建的store，使用createStore方法
store 可以理解为有多个加工机器的总工厂
提供subscribe，dispatch，getState这些方法。
按步骤手把手实战。
上述步骤，对应的序号，我会在相关代码标出
npm install redux -S // 安装 import { createStore } from 'redux' // 引入 const reducer = (state = {count: 0}, action) => {----------> ⑴ switch (action.type){ case 'INCREASE': return {count: state.count + 1}; case 'DECREASE': return {count: state.count - 1}; default: return state; } } const actions = {---------->⑵ increase: () => ({type: 'INCREASE'}), decrease: () => ({type: 'DECREASE'}) } const store = createStore(reducer);---------->⑶ store.subscribe(() => console.log(store.getState()) ); store.dispatch(actions.increase()) // {count: 1} store.dispatch(actions.increase()) // {count: 2} store.dispatch(actions.increase()) // {count: 3}
自己画了一张非常简陋的流程图，方便理解redux的工作流程
刚开始就说了，如果把store直接集成到React应用的顶层props里面，只要各个子组件能访问到顶层props就行了，比如这样：
<顶层组件 store={store}> <App /> </顶层组件>
不就ok了吗？这就是 react-redux。Redux 官方提供的 React 绑定库。 具有高效且灵活的特性。
React Redux 将组件区分为 容器组件 和 UI 组件
前者会处理逻辑
后者只负责显示和交互，内部不处理逻辑，状态完全由外部掌控
两个核心
Provider
看我上边那个代码的顶层组件4个字。对，你没有猜错。这个顶级组件就是Provider,一般我们都将顶层组件包裹在Provider组件之中，这样的话，所有组件就都可以在react-redux的控制之下了,但是store必须作为参数放到Provider组件中去
<Provider store = {store}> <App /> <Provider>
这个组件的目的是让所有组件都能够访问到Redux中的数据。
connect
这个才是react-redux中比较难的部分，我们详细解释一下
首先，先记住下边的这行代码：
connect(mapStateToProps, mapDispatchToProps)(MyComponent)
mapStateToProps
这个单词翻译过来就是把state映射到props中去 ,其实也就是把Redux中的数据映射到React中的props中去。
举个栗子：
const mapStateToProps = (state) => { return { // prop : state.xxx | 意思是将state中的某个数据映射到props中 foo: state.bar } }
然后渲染的时候就可以使用this.props.foo