当您学习反应时,您几乎总是会听到人们说Redux有多出色,并且应该尝试一下。 React生态系统正在以快速的速度生长,并且您可以与React相连,例如Flow,Redux,Middlewares,Mobx等。
学习反应很容易,但是习惯了整个反应生态系统需要时间。本教程是对React生态系统REDUX的整体组成部分之一的介绍。
这是您可能不熟悉的一些常用术语,但它们本身并不是特定于Redux。您可以浏览本节,并在某些东西没有意义时回到这里。
纯函数只是正常功能,其必须满足两个其他约束:
例如,这是一个纯函数,它返回两个数字的总和。
/ *纯添加功能 */<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>
“可观察的副作用”是与外界功能进行的互动的奇特术语。如果一个函数试图将值写入函数之外的变量或试图调用外部方法,则可以安全地调用这些东西副作用。
但是,如果纯函数调用另一个纯函数,则该功能可以视为纯净的功能。这是一些常见的副作用:
在使用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() - 访问应用程序的当前状态树。
让我们创建一家商店。 Redux具有创建新商店的configureStore
方法。您需要将其传递给还原器,尽管我们不知道那是什么。因此,我将仅创建一个称为还原器的函数。您可以选择指定第二个参数,该参数设置了商店的初始状态。
从“ 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中文网其他相关文章!