Redux 是什么？简单解释一下！

你好呀，

我已经有一段时间没创作任何东西了。我收到很多关于创建 Redux 教程的消息！所以就在这里。我花了很多天时间让这些教程更加简单易懂。

如果您更喜欢观看视频，那么这里就是您可以继续阅读的地方😄！

现在让我们开始吧^_^

在深入探讨 Redux 是什么之前，我们先来看看为什么我们需要 Redux。

假设您的项目中有一个 app.js 文件作为根组件，并且在组件树中，第一层包含 3 个组件，而在第二层中有两个第二个组件的子组件。

在这里，您已从 API 获取数据，并将其保存在第二个组件的状态中。您可以通过直接向下传递此数据状态，在子组件中使用它。

现在，当相邻组件 3 想要访问该数据状态时，就会出现问题。

因此问题在于当多个组件需要共享和使用相同的状态时。

这个问题可以通过将状态“提升”到父组件来解决。因此，你可以将第二个组件的状态提升到 app.js 文件，然后在第三个组件中使用该状态。

但这并不总是有帮助，因为在大型应用程序中，许多不同的组件需要使用许多状态，所以这不是最佳实践。

解决这个问题的一种方法是将状态从组件树中移除，并将其设置为集中式。这样，树中的任何组件都可以访问和更新状态，而不必担心其在树中的层次结构。

这是 Redux 背后的基本思想：一个集中的地方来包含应用程序中的全局状态，以及更新该状态时要遵循的特定模式。

您可以使用 redux 来存储状态，并且可以将其用于任何组件，而不必担心层次结构。

将此操作视为更新状态的触发器，当状态发生变化时，视图会使用新状态更新 UI。

对于简单的计数器应用程序，当我们增加计数器值时，增加事件进入状态并且状态更新新值，然后视图根据更新的状态重新呈现用户界面。

那么让我们看看使用 Redux 时会发生什么。

在 redux 中有一个名为reducer的函数。
这个 reducer 函数接受两个参数，第一个是 state 本身，第二个是 action 对象。

动作对象可以具有诸如增量之类的动作类型以及任何想要修改状态的数据。

现在，Redux 根据先前的状态值和 Action 类型计算新的状态值并进行更新。
所有这些都发生在 Redux Store 内部，你可以将其视为任何用于状态管理的集中式数据库。

然后，当视图获得新的状态值时，它会重新渲染 UI。

让我向你展示另一个 redux 如何工作的例子！

正如您在此处看到的，这是一个简单的 gif，它解释了 redux 的工作原理，您可以在官方redux 文档中找到它。

现在使用此 UI 您可以存款或取款。

当我们单击存款按钮时，单击事件转到事件处理程序，根据事件，事件处理程序分派一个类型为存款的操作以及有效载荷属性中所需的任何详细信息。

这个 Reducer 接受两个参数：状态 (state) 和动作 (action)。状态的初始值为 0 美元，动作为存款，因此 Reducer 将通过存入 10 美元金额来更新新状态。

您可以在 UI 余额中看到，它从 0 美元变为 10 美元。

Redux 的定义

它是 JS 应用程序的可预测状态容器。

这是，

可预测--> 因为它可以帮助您编写行为一致且可以在不同环境（客户端、服务器和本机）中运行的应用程序。

集中式--> 由于这个特性，我们不需要将状态提升到父组件，并且由于这种集中行为，我们可以使用我们想要的任何组件的状态。

可调试--> Redux DevTools扩展是调试 Redux 应用的绝佳工具。使用此工具，您可以查看应用状态何时、何地、为何以及如何发生变化。

灵活--> 因为它适用于任何 UI 层，并且拥有庞大的附加组件生态系统。

如果您对与该主题相关的任何内容感到困惑，请随时问我😉！

欢迎访问我的 YouTube 频道：

在 Twitter 上关注我，我会在那里分享很多有用的资源！