Redux 和 React 集成

• Redux是一个数据状态管理插件，搭配 React 特别合适，详细的用法可见Redux官网

• 使用场景无论是移动端还是 pc 端，当你使用 React 或者 vue 开发组件化的 SPA 程序时，组件之间共享信息是一个非常大的问题。例如，用户登录之后客户端会存储用户信息（如userid
  、头像等），而系统的很多个组件都会用到这些信息，例如收藏、点赞、评论等。这些组件在用到用户信息时，难道每次使用都重新获取一遍？———— 自然不是这样。因此每个系统都需要一个管理多组件使用的公共信息的功能，这就是 Redux 的作用。同理，vue 也有相应的工具，即 vuex ，可以自己去 github 上搜索相关资料。
  初学者可能通过这几句话无法真实理解它的用意，此时你只需要记住：只要使用 React 开发系统，你绝大部分都需要结合 Redux 来使用，后面的课程我们详细讲解 Redux 在实际项目中的使用，课程结束后，你就会明白其中的道理。

• 安装如果单纯使用 Redux 仅仅安装 Redux 即可，执行npm install redux --save
  ，不过在 React 中使用 Redux 肯定会用到 react-redux
  这一工具，因此这里一起安装完，执行npm install react-redux --save
  。

基本使用可以参见./app/redux-demo.js
中的例子，如下代码

import { createStore } from 'redux'

export default function () {
    // 下面这一段代码，就是 https://github.com/reactjs/redux 中的入门demo

    // 定义计算规则，即 reducer
    function counter(state = 0, action) {
        switch (action.type) {
            case 'INCREMENT':
                return state + 1
            case 'DECREMENT':
                return state - 1
            default:
                return state
        }
    }

    // 根据计算规则生成 store
    let store = createStore(counter)

    // 定义数据（即 state）变化之后的派发规则
    store.subscribe(() => {
        console.log('current state', store.getState())
    })

    // 触发数据变化
    store.dispatch({type: 'INCREMENT'})
    store.dispatch({type: 'INCREMENT'})
    store.dispatch({type: 'DECREMENT'})
}

• 简单几十行代码，就诠释了 Redux 的设计理念，这里简单分析一下：
• Redux 是一个管理数据的工具，我们创建一个store变量用来管理数据。而这个store不是凭空创建的，创建它的前提是，得设定一个管理规则。以上代码中，我们的管理规则是：数据（即state）默认是 0，传入INCREMENT就加一，传入DECREMENT就减一
  创建store用来管理数据，具体的管理形式是什么呢？第一，要通过一个函数来触发数据的变化，即dispatch，触发的时候一定要符合之前定制的规则，否则无效。第二，数据一旦发生变化时，会导致怎样后果，即subscribe中定义的函数会执行。第三，如何取得当前的数据，即store.getState()。这一块，熟悉设计模式的同学不难理解，这就是普通的发布和订阅的设计模式，也是js种惯用的设计模式。
  还有一点特别要注意，即在规则函数中，数据变化时要return一个新的值，而不是直接修改原来的值。这一点和之前提到的Immutable.js一样，都是使用了不可变数据这一概念。这种设计方式明确了数据的变化时段，使得数据管理更清晰，复杂度更低。

Redux 和 React 集成

这块一开始介绍可能会感觉有点混乱，要做好心理准备。

• 创建 store跟上次讲过得简单 demo 一样，首先也需要创建一个store
  ，参见./app/store/configureStore.js
  的代码。之前的 demo 提到，创建store
  之前要有规则，这里的第一个参数就是这个规则，后面会详细讲到。