首页 > web前端 > js教程 > Redux入门:为什么Redux?

Redux入门:为什么Redux?

Jennifer Aniston
发布: 2025-03-13 11:44:09
原创
882 人浏览过

当您学习反应时,您几乎总是会听到人们说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>
    登录后复制

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

    Redux入门:为什么Redux?

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

    还原器

    一个动作描述了问题,还原器负责解决问题。在较早的示例中, 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中文网其他相关文章!

    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    作者最新文章
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板