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
之前要有规则，这里的第一个参数就是这个规则，后面会详细讲到。
