React 状态管理：Flux 与 Redux

我们一直使用一个顶层组件 App 来管理全局应用状态。对于小型应用来说，这种方式尚可，但随着功能不断增加，这种做法会变得非常繁琐。

与 React 一同发布时，Facebook 推出了名为 Flux 的技术。Flux 是一种帮助管理全局应用状态的方法论。虽然 Flux 效果不错，但它依赖事件机制，容易造成混淆。

幸运的是，Dan Abramov 出面推出了 Redux。Redux 与 Flux 拥有相同的核心思想，但无需使用事件，理解起来更简单，如今已成为应用状态管理的事实标准。

注意：以下介绍的概念和技术并非使用 React 构建生产级应用所必需。许多人利用它们提升开发效率，但也存在一些缺点。（我们稍后会详细分析）

核心概念

还记得我们 App 组件的初始状态吗？它看起来像这样：

1state = {
2  location: '',
3  data: {},
4  dates: [],
5  temps: [],
6  selected: {
7    date: '',
8    temp: null
9  }
10};

从这个函数返回的对象就是我们整个应用的状态。在应用启动时，我们的状态如下所示：

1{
2  location: '',
3  data: {},
4  dates: [],
5  temps: [],
6  selected: {
7    date: '',
8    temp: null
9  }
10}

当用户修改了位置输入框后，我们状态中的 location 字段也随之改变：

1{
2  location: '维也纳，奥地利',
3  data: {},
4  dates: [],
5  temps: [],
6  selected: {
7    date: '',
8    temp: null
9  }
10}

我们不再直接通过 this.setState 修改该字段，而是从组件中调用一个名为 changeLocation 的函数。Redux 会捕获这个函数的调用，执行其内部逻辑，并更新应用状态中的 location 字段。

此时，由于位置发生了变化，应用状态也随之更新，主组件 <App /> 会自动重新渲染，以展示新的数据！（这与组件内部状态的更新机制类似）

这种方法的最大优势在于，组件不再需要关心状态是如何保存的。我们可以将位置以坐标形式存储，也可以去除空格后再保存，但组件本身无需关注这些细节——它只需调用 changeLocation 函数即可。这样一来，应用状态与各个组件之间实现了松耦合。

这一状态管理的流程可以概括为：

如果用更通用的语言描述，就是：调用一个函数来改变应用状态，从而触发某些组件的重新渲染：

接下来，我们需要引入一些术语，才能正式开始实现这套机制。我们用来改变应用状态的函数，在 Redux 中被称为“动作”（action），而调用这个函数的过程称为“分发”（dispatch）。现在，我们用这些术语重新描绘一遍整个流程：