枫之谷

工欲善其事，必先利其器。想要用好 react 这个前端 View 层大杀器，深入理解其工作原理必不可少。理解一个框架是如何让某种操作得到优化的至关重要，知其然也要知其所以然，它有助于我们对这个框架的正确高效的使用，这是一个前端工程师成长的必经路程。

这一节主要来讲讲 Redux 在 React 项目中的具体使用。

将学的新知识新组件集成进项目里是初学者最大的障碍，这也是我最初学习 Redux 的时候很难有进展的原因。Redux 的源码体积很小，加起来连 1k 行都不到，利用的原理在之前已经说过，也很好理解，但由于 Redux 只是 Flux 对 React 的一种优化，但并不只是服务于 React，如果你愿意，在 Vue 中使用 Redux 也是完全可行的，毕竟状态管理的思想还是不会变的嘛。

因此我们需要一个 Redux 与 React 之间的连接件来方便我们的搭建，这就是React-redux。也是我们将 Redux 合并进 React 最后也是最大的难点。

上一节说到，reducer 是一个纯函数。那么纯函数具体的定义是什么呢？阮一峰老师是这样说的：

纯函数是函数式编程的概念，必须遵守以下一些约束。

• 不得改写参数

• 不能调用系统 I/O 的 API

• 不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果

在理解了 redux 的作用原理后，我们来看看 redux 的基本概念。

state

state：state 是状态管理的根本。在 redux 中，有唯一的状态树 state，为整个应用共享。本质上是一个普通对象。处于程序逻辑中，无法直接调用。

store

store：store 是 state 的管理者，一个应用同样只有唯一的 store，管理着唯一的 state。store 包含下列四个函数：

getState() ：用于获取整个 state

dispatch(action) ：View 触发 action 改变 state 的唯一途径，请注意我用了唯一这个词

subscribe(listener) ：可以理解成是 DOM 中的 addEventListener ，也就是我在上一篇里说过的发布订阅模式中的订阅方法，在 redux 的使用中，这个方法通常不需要手动使用，一般会放在 setState 方法中。

replaceReducer(nextReducer) ：这个不太常用，一般在 Webpack Code-Splitting 按需加载的时候用获取 state 的方式：

学习 react 的过程中，redux 的熟练掌握是一个绕不开并且很难绕过去的坎。接触 react 已经有一段时间了，甚至连一些小项目都用 react 做了不少了，但 redux 的使用上还是有诸多不理解不熟练的地方。正好有很长一段时间没有更过博客了，就从这里着手，增强一下自己的理解。