Redux入门：为什么Redux？

当您学习反应时，您几乎总是会听到人们说Redux有多出色，并且应该尝试一下。 React生态系统正在以快速的速度生长，并且您可以与React相连，例如Flow，Redux，Middlewares，Mobx等。

学习反应很容易，但是习惯了整个反应生态系统需要时间。本教程是对React生态系统REDUX的整体组成部分之一的介绍。

基本的非列克术语

这是您可能不熟悉的一些常用术语，但它们本身并不是特定于Redux。您可以浏览本节，并在某些东西没有意义时回到这里。

纯函数

纯函数只是正常功能，其必须满足两个其他约束：

1. 给定一组输入，该函数应始终返回相同的输出。
2. 它没有产生副作用。

例如，这是一个纯函数，它返回两个数字的总和。

 / *纯添加功能 */<br> const add =（x，y）=> {<br> 返回xy;<br> }<br><br> console.log（add（2,3））// 5<br><br>

纯函数提供可预测的输出，并且是确定性的。当函数执行除了计算其返回值之外的任何内容时，它就会变得不纯净。

例如，下面的添加函数使用全局状态来计算其输出。另外，该函数还将值记录到控制台，这被认为是副作用。

 const y = 10;<br><br> const impureadd =（x）=> {<br> console.log（`输入为$ {x}和$ {y}`）;<br> 返回xy;<br> }<br>

可观察到的副作用

“可观察的副作用”是与外界功能进行的互动的奇特术语。如果一个函数试图将值写入函数之外的变量或试图调用外部方法，则可以安全地调用这些东西副作用。

但是，如果纯函数调用另一个纯函数，则该功能可以视为纯净的功能。这是一些常见的副作用：

• 拨打API
• 登录控制台或打印数据
• 突变数据
• DOM操纵
• 检索当前时间

容器和介绍组件

在使用React应用程序时，将组件体系结构分为两个很有用。您可以将它们分为两个类别：容器组件和呈现组件。它们也被普遍称为智能和愚蠢的组件。

容器组件与事物的工作方式有关，而演讲组件与事物的外观有关。为了更好地理解这些概念，我在另一个教程中介绍了这一点：React中的容器与演示成分。

可变的与不变的物体

可变的对象可以定义如下：

可变的对象是一个对象，在创建后可以修改状态。

不变性是完全相反的 - 一个不变的对象是一个对象，在创建后不能修改状态。在JavaScript中，字符串和数字是不变的，但对象和数组却不是。该示例表明差异更好。

 / *字符串和数字是不变的 */<br><br>令A = 10;<br><br>令b = a;<br><br> b = 3;<br><br> console.log（`a = $ {a}和b = $ {b}`）; // a = 10和b = 3<br><br> / *但是对象和数组不是 */<br><br> / *让我们从对象开始 */<br><br>让用户= {<br> 名称：“鲍勃”，<br> 年龄：22，<br> 工作：“无”<br> }<br><br> Active_user =用户;<br><br> active_user.name =“ tim”;<br><br> //两个对象都有相同的值<br>console.log（active_user）; // {“ name”：“ tim”，“ age”：22，“ job”：“无”}<br><br> console.log（用户）; // {“ name”：“ tim”，“ age”：22，“ job”：“无”}<br><br> / *现在用于数组 */<br><br>让用户= [1,2,3,4,5]<br><br>让usersiddup = usersId;<br><br> usersiddup.pop（）;<br><br> console.log（usersIdDup）; // [1,2,3,4]<br> console.log（usersId）; // [1,2,3,4]<br>

要使对象不变，请使用store.getState（） - 访问应用程序的当前状态树。

Store.subscribe（侦听器） - 聆听该州的任何变化。每次派遣行动时，都会称呼它。

让我们创建一家商店。 Redux具有创建新商店的configureStore方法。您需要将其传递给还原器，尽管我们不知道那是什么。因此，我将仅创建一个称为还原器的函数。您可以选择指定第二个参数，该参数设置了商店的初始状态。

src/index.js

从“ redux”导入{configurestore};<br> //这是还原器<br>const还原=（）=> {<br> / *这里有东西 */<br> }<br><br> //初始状态是可选的。<br> //对于此演示，我正在使用计数器，但通常状态是一个对象<br>const initialstate = 0<br> const Store = configurestore（reducer，initialstate）;<br>

现在，我们将收听商店中的任何更改，然后and console.log()商店的当前状态。

 store.subscribe（（）=> {<br> console.log（“状态已更改” store.getState（））;<br> }））<br>

那么我们如何更新商店？ Redux具有使这一实现的所谓动作。

行动/行动创造者

操作也是简单的JavaScript对象，可将信息从您的应用程序发送到商店。如果您有一个非常简单的计数器带有增量按钮，则按下它将导致触发的动作，看起来像这样：

 {<br> 类型：“增量”，<br> 有效载荷：1<br> }<br>

它们是商店唯一的信息来源。商店的状态仅对动作发生变化。每个操作都应具有描述动作对象打算做什么的类型属性。除此之外，动作的结构完全取决于您。但是，请保持较小的操作，因为操作代表了转换应用程序状态所需的最低信息量。

例如，在上面的示例中，类型属性设置为“增量”，并包括附加的有效载荷属性。您可以将有效载荷属性重命名为更有意义的东西，或者在我们的情况下，将其命名为完全有意义。您可以这样向商店派遣行动。

 store.dispatch（{type：“增量”，有效载荷：1}）;<br>

在编码REDUX时，通常不会直接使用操作。取而代之的是，您将调用返回操作的函数，这些功能通常称为“动作创造者”。这是我们前面讨论的增量动作的动作创建者。

 const regementCount =（count）=> {<br> 返回 {<br> 类型：“增量”，<br> 有效载荷：计数<br> }<br> }<br>

因此，要更新计数器状态，您将需要派遣这样的incrementCount措施：

 store.dispatch（regementCount（1））;<br> store.dispatch（regementCount（1））;<br> store.dispatch（regementCount（1））;<br>

如果您前往浏览器控制台，您会发现它在某种程度上工作。我们之所以变得不确定，是因为我们还没有定义还原器。

因此，现在我们已经涵盖了动作和商店。但是，我们需要一种机制来转换动作提供的信息并改变商店的状态。还原器达到了这个目的。

还原器

一个动作描述了问题，还原器负责解决问题。在较早的示例中， incrementCount方法返回了一项动作，该操作提供了有关我们要向状态进行更改类型的信息。还原器使用此信息实际更新状态。文档中有一个重要的观点，您应该在使用Redux时始终记住：

给定相同的参数，还原器应计算下一个状态并将其返回。不足为奇。没有副作用。没有API呼叫。没有突变。只是一个计算。

这意味着还原器应该是纯函数。给定一组输入，它应始终返回相同的输出。除此之外，它不应该做更多的事情。同样，还原器并不是副作用的地方，例如拨打AJAX调用或从API获取数据。

让我们为柜台填充还原器。

 //这是还原器<br><br>const还原器=（state = initialstate，action）=> {<br> switch（action.type）{<br> 案例“增量”：<br> 返回状态行动<br> 默认：<br> 返回状态<br> }<br> }<br>

还原器接受两个论点 - 国家和行动 - 它返回了一个新状态。

 （前州，动作）=> newstate<br>

国家接受默认值， initialState ，仅当状态的值不确定时才使用。否则，将保留国家的实际价值。我们使用开关语句选择正确的操作。刷新浏览器，一切都按预期工作。

让我们添加一个DECREMENT案例，没有该计数器不完整。

 //这是还原器<br><br>const还原器=（state = initialstate，action）=> {<br> switch（action.type）{<br> 案例“增量”：<br> 返回状态行动<br> 案例“减少”：<br> 返回状态 -  action.payload<br> 默认：<br> 返回状态<br> }<br> }<br>

这是动作创造者。

 const dectementCount =（count）=> {<br> 返回 {<br> 类型：“减少”，<br> 有效载荷：计数<br> }<br> }<br>

最后，将其派往商店。

 store.dispatch（regementCount（4））; // 4<br> store.dispatch（dectementCount（2））; // 2<br>

就是这样！

概括

本教程本来是用Redux管理状态的起点。我们介绍了了解基本的Redux概念（例如商店，动作和还原器）所需的一切。在本教程结束时，我们还创建了一个工作的Redux演示计数器。尽管这并不多，但我们了解了所有拼图的所有部分如何结合在一起。

在过去的几年中，React越来越受欢迎。实际上，我们在市场上有许多物品可供购买，审查，实施等。如果您正在寻找围绕React的其他资源，请随时检查它们。

在下一个教程中，我们将利用我们在此处学到的知识来创建REDUX的React应用程序。继续关注直到那时。在评论中分享您的想法。

以上是Redux入门：为什么Redux？的详细内容。更多信息请关注PHP中文网其他相关文章！