一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

前言

最近学习了React系列课程并参与了真实项目的开发，但是很多细节还是有所遗忘所以为了巩固知识，对React的一些重要点进行记录分享。有所不足欢迎指正。

Redux的作用

在项目开发过程中我们会对项目的state进行管理，随着项目功能越来越多需要管理的状态就会越来越多，越来越复杂。因此是否有一个工具可以对项目里复杂的state进行统一的管理？在Vue中提供了Vuex状态管理工具，我们只需要将状态定义在VueX里就可以在整个项目中进行使用。在React中我们可以使用Redux，引用官方的解释“Redux是JavaScript 状态容器，提供可预测化的状态管理。”。什么叫可预测化的状态管理呢？就是我们可以控制和追踪state在什么时候因为什么原因发生了变化。接下来我会在本篇文章中详细介绍Redux的原理和相关应用，在看完本篇文章后我相信你肯定会对Redux有所了解。

Redux的核心理念

在开始Redux的使用前我们先了解一下Redux的核心理念。

store

我们在项目开发过程中会定义类似如下图所示的数据，我们在页面某些位置通过books.push、books[0].num=20等操作对数据进行修改，这些操作是不可追踪和不可预测的。在发生BUG后我们很难追踪到是哪里的变化造成的。Redux就可以让这些数据变得可追踪和可预测。当程序出现BUG后我们就可以很方便的进行调试了。在redux中我们会有一个位置对这些数据进行一个固定的存储。

action

Redux要求我们在进行数据更新时必须通过action来更新数据，所有的数据变化通过派发（dispatch）action来进行更新。如下图所示我们可以定义几个改变books的action：新增book、修改name、增加num。

我们通过这样一个一个的对象对books进行修改，每次我们修改的类型、内容都是知道。我们就可以对修改进行监控那么我们每次的修改都是可以预测的。

reducer

reducer的作用就是将store存储的数据与action联系在一起生成一个新的state。如下图所示：

可以看到我们在代码里大量使用的扩展运算符(代码看不懂的话建议多学习一下es6语法)，redux要求reducer必须是一个纯函数，在reducer里不能对数据直接进行修改如：state.books[0].name="java";这样就会产生副作用，reducer就不是纯函数了。在后面我们会介绍为什么reducer必须是一个纯函数。

redux三大原则

在本篇的最后简单了解一下redux三大原则，这里我引用大神coderwhy的解释：

1.单一数据源

整个应用程序的state被存储在一颗object tree中，并且这个object tree只存储在一个 store 中； Redux并没有强制让我们不能创建多个Store，但是那样做并不利于数据的维护； 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改；

2.state是只读的

唯一修改State的方法一定是触发action，不要试图在其他地方通过任何的方式来修改State； 这样就确保了View或网络请求都不能直接修改state，它们只能通过action来描述自己想要如何修改state； 这样可以保证所有的修改都被集中化处理，并且按照严格的顺序来执行，所以不需要担心race condition（竟态）的问题；

3.使用纯函数进行修改

通过reducer将 旧state和 actions联系在一起，并且返回一个新的State； 随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分； 但是所有的reducer都应该是纯函数，不能产生任何的副作用；