（19）Redux 入门——① Redux 的概念和工作流程 | React 基础理论实操通过前面文章的学习，我们算是入

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

涉及面试题：
1. 什么是 Flux？
2. 什么是 Redux？
3. Redux 的核心原则是什么？
4. 与 Flux 相比，Redux 的缺点是什么？
5. Flux 和 Redux 之间有什么区别？

编号：[react_19]

1 Redux 概念

通过前面文章的学习，我们算是入了 React 的门，可以做一些小的效果了。

但是，正如之前的文章所讲，React 只是一个“视图层”框架。如果我们想做一个大型应用，就需要在 React 的基础上去配套一个“数据层”的框架（如 Redux）。

只有将这两者结合着使用，我们才能更轻松地开发大型应用。

❓如上图右边使用了 Redux 后，“墨绿色”的组件想要给其他很多个“灰色”组件传值时，它会怎么操作呢？ 答：

在 Redux 里边，它要求我们把数据都放在一个名叫 Store 的公共存储区域。即，所有组件的数据，都不放在组件自身里。

当“墨绿色”组件想要去改变数据并传递给其他“灰色”组件时，它只需要去改变 Store 里边自身对应的数据即可。然后，各“灰色”组件会自动地感知到 Store 里的变化，并重新去 Store 里取用变化后的数据。

这样的话，无论组件的层次有多深，它们走的流程都是一样的。这也就大大简化了数据传递的流程！

❓Redux = Reducer + Flux ? 答：

Facebook 在 2013 年开源 React 的时候，同时也开源了一个最原始的“数据层框架”——Flux。

但 Flux 推出后，业界的开发者在使用的过程中，发现 Flux 有一些缺点——如，它的公共存储空间 Store 可以有很多个，当数据存储的时候，就会出现“数据依赖”的问题。

基于此，有开发者就对 Flux 做了一个升级，也就是我们目前使用的 Redux。

在现今的 Redux 里边，除了借鉴了很多 Flux 相关设计理念外，它还引入了一个 Reducer 的概念（后边的文章我们会详讲）。

2 Redux 的工作流程

如上图所示，Redux 的工作流程可以形象地理解为“图书馆”运作流程：

“1️⃣借书人（React Component）——>2️⃣‘我要借 xx 书’（Action Creators）——>3️⃣图书管理员（Store）——>4️⃣图书馆记录本（Reducers）——>3️⃣图书管理员（Store）——>1️⃣借书人（React Component）”。

（💡上图很形象，建议你好好地保存下来，这两天不停地跟着文章理解！）

以下，我们对上图作详细地形象解释：

“借书人1️⃣”想要去图书馆借本书，当他见到“图书管理员”时，他有一个很重要的步骤2️⃣——会说：“我要借 xx 书”；

“图书管理员3️⃣”光凭脑子是没办法记住图书馆里所有图书的借还情况，他需要去查“记录本4️⃣”；

“记录本4️⃣”会反馈 xx 书的所有信息给“图书管理员3️⃣”；

“图书管理员3️⃣”知道图书放在哪里后，他会把 xx 书给到“借书人1️⃣”。

❓对应到代码上，是怎样的呢？

• 获取数据：

“React component 组件1️⃣”想要在“Store 3️⃣”处获取一些数据，它需要跟“Store”说：“我要获取数据（Action Creators 2️⃣）”；

“Store 3️⃣”接收到这个请求后，它自己根本不知道你到底要什么数据，它需要到“Reducers 4️⃣”中去查一查，看到底应该给你什么数据；

“Reducer 4️⃣”中会知道应该给你“组件”什么数据，它会告诉“Store”该把什么样的数据给到“组件”；

“Store 3️⃣”知道了后，就把相应的数据传给“组件”即可。

• 改变数据：

“React component 组件1️⃣”想要改变一些数据，它需要跟“Store”说：“我要改变数据（Action Creators 2️⃣）”；

“Store 3️⃣”接收到这个请求后，它自己根本不知道该如何帮助你改变数据，它需要到“Reducers 4️⃣”中去查一查，看到底应该怎样帮你改变数据；

“Reducer 4️⃣”中会知道怎样改变数据，它会告诉“Store”该怎样去修改数据；

“Store 3️⃣”知道了后，把数据进行修改，然后告诉“组件1️⃣”：我的数据已修改完，你可以重新来获取数据了。

如此一来，组件再获取数据后，就是最新的数据。

下一篇，我们就来结合上边所学，进行代码的编写。

祝好，qdywxs ♥ you！