React Redux

是什么

React Redux 是 Redux 的 React 版，Redux 本身独立于其他框架而存在，又可以结合其他视图框架使用，比如此处的 React。

干嘛的

按个人理解，Redux 是应用的状态管理框架，以事件流的形式来发送事件、处理事件、操作状态和反馈状态。
这么说还是太抽象了，举个简单的例子。比如有个 A 组件，它要改变它自己的一个 div 里面的文字，假设这个文字内容由 this.props.content 决定，那么它可以发送一个事件，这个事件经过一系列的处理，最终会改变 this.props.content。
龟龟，这也太秀了吧，改个文字都得这么复杂？没错，如果是这种情况去用 React Redux，那简直就是画蛇添足，没事找事。这里有一篇文章 You Might Not Need Redux，可以考虑自己编写的应用，是否真的需要 React Redux。
回到上面的例子，倘若 A 组件要去改变同级的一个 B 组件里面的文字呢？按照我们之前的做法，我们会在 A B 组件的上一层套上一个 Parent 组件，将修改 B 组件文字的方法传给 A 组件，A 组件调用后改变 Parent 组件的 state，进而改变 B 组件的文字。

那么我们的代码大约是这个样子：

//Parent 组件
render() {
    return (
      <div>
        <A onClick={(newContent) => this.setState({content: newContent})}/>
        <B content={this.state.content}/>
      </div>
    )
}

//A 组件
render() {
    return (
      <div onClick={() => this.props.onClick('This is new content for B')}>Change B's content</div>
    )
}

//B 组件
render() {
    return (
      <div>{this.props.content}</div>
    )
}

有点费劲呢…可是我们总算实现了功能~
什么？多加了个同级的 C 组件，也要 A 组件来改变里面的文字…
什么？有个深度为 100 的组件，要它来改变 B 组件的文字…
我胖虎出去抽根烟，回来要看到这两个功能实现，不然锤死在座各位。

为了实现这两个功能，回调函数满天飞，特别是第二个功能，你得把回调函数往下传 100 层…
差不多这个时候，你就该考虑 React Redux 了。
像第二个功能，只需要从深层的组件发送一个事件出来，这个事件最终就会改变 B 组件的文字。
嗬，听起来不错。

讲了这么多，是时候一睹 React Redux 的真容。

其中 Action、Dispatch 和 Reducer 都是 React Redux 的东西，View 则是代表我们的视图层 React。
先理清几个概念：Store，Action 和 Reducer（Dispatch 是 Store 的一个方法）

Store 是整个 React Redux 应用总的状态容器，是一个对象
Action 也是一个对象，表明事件，需要有 type 字段
Reducer 是一个函数，会根据不同 Action 来决定返回不同的数据

从上面的图看到 View 层可以通过两种方式来更新：

View 层发出 Action，Dispatch 之后到达 Reducer，Reducer 处理后返回新的东西去更新 View
其它层发出 Action 以同样的方式来更新 View

上面无论哪一种方式，都是遵循单向数据流的规则，即：发送 Action -> Reducer 根据 Action 返回数据 -> Store 被更新 -> View 被更新。

Store

Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。

import { createStore } from 'redux';
const store = createStore(fn);

createStore可以接受一个函数作为参数，返回新生成的store对象。

State

Store对象包含所有数据。如果想得到某个时间点的数据，就要对 Store 生成快照。这种时间点的数据集合，就叫做 State。State存在于Store中。可以通过 store.getState()得到

import { createStore } from 'redux';
const store = createStore(fn);

const state = store.getState();

Redux 规定， 一个 State 对应一个 View。只要 State 相同，View 就相同。

Action

State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。State的唯一办法就是使用Action，他会负责把数据送到store中的。

const action = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};

这里Action的类型是：“ADD_TODO”，携带的信息是：‘Learn Redux’。
Action是一个对象，type属性是必须的，表示Action的名称或者类型，其他属性可以自由设置，来携带自己需要的信息。一般来说State就是由Action的type值进行判断，然后改变的