草庐IT

Redux核心理念的基本介绍

学全栈的灌汤包 2023-04-21 原文

文章目录

Redux的核心理念介绍

此篇文章是React中的Redux状态管理库的基本介绍, Redux的详细使用过程在下篇文章中进行讲解

Redux的出现背景

JavaScript开发的应用程序，已经变得越来越复杂了:

JavaScript需要管理的状态越来越多，越来越复杂;

这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等，也包括一些UI的状态，比如某些元素是否被选中，是否显示加载动效，当前分页;

管理不断变化的state是非常困难的:

状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能会引起状态的变化;

当应用程序复杂时，state在什么时候，因为什么原因而发生了变化，发生了怎么样的变化，会变得非常难以控制和追踪;

React是在视图层帮助我们解决了DOM的渲染过程，但是State依然是留给我们自己来管理:

无论是组件定义自己的state，还是组件之间的通信通过props进行传递; 也包括通过Context进行数据之间的共享;

React主要负责帮助我们管理视图，state如何维护最终还是我们自己来决定;

Redux就是一个帮助我们管理State的容器:Redux是JavaScript的状态容器，提供了可预测的状态管理;
Redux除了和React一起使用之外，它也可以和其他界面库一起来使用(比如Vue)，并且它非常小(包括依赖在内，只有2kb)

Redux核心理念-Store

Redux的核心理念非常简单。

比如我们有一个朋友列表需要共享到多个页面进行管理:

如果我们没有定义统一的规范来操作这段数据，那么整个数据的变化就是无法跟踪的;

比如页面的某处通过friends.push的方式增加了一条数据;

比如另一个页面通过friends[0].age = 25修改了一条数据;

friends: [
  {name: "aaa", age: 19},
  {name: "bbb", age: 20},
  {name: "ccc", age: 19},
  {name: "ddd", age: 18},
]

整个应用程序错综复杂，当出现bug时，很难跟踪到底哪里发生的变化;

因此我们可以定义一些数据, 将数据存放在store中供其他页面使用

Redux核心理念-action

Redux要求我们通过action来更新数据:

所有数据的变化，必须通过派发(dispatch)action来更新;

action是一个普通的JavaScript对象，用来描述这次更新的type和content;

强制使用action的好处是可以清晰的知道数据到底发生了什么样的变化，所有的数据变化都是可跟追、可预测的;

当然，目前我们的action是固定的对象;

真实应用中，我们会通过函数来定义，返回一个action;

Redux核心理念-reducer

但是如何将state和action联系在一起呢? 答案就是通过reducer

reducer是一个纯函数;

reducer做的事情就是将传入的state和action结合起来生成一个新的state;

理念Reduxspanclasstokenjavascript前端ui

有关Redux核心理念的基本介绍的更多相关文章

  1. Unity 热更新技术 | （三） Lua语言基本介绍及下载安装 - 2

    ?博客主页：https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创，首发于CSDN??学习专栏推荐：Unity系统学习专栏?游戏制作专栏推荐：游戏制作?Unity实战100例专栏推荐：Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正！?未来很长，值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  3. ruby-on-rails - 使用 HTTParty 的非常基本的 Rails 4.1 API 调用 - 2

    Rails相对较新。我正在尝试调用一个API，它应该向我返回一个唯一的URL。我的应用程序中捆绑了HTTParty。我已经创建了一个UniqueNumberController，并且我已经阅读了几个HTTParty指南，直到我想要什么，但也许我只是有点迷路，真的不知道该怎么做。基本上，我需要做的就是调用API，获取它返回的URL，然后将该URL插入到用户的数据库中。谁能给我指出正确的方向或与我分享一些代码？ 最佳答案 假设API为JSON格式并返回如下数据:{"url":"http://example.com/unique-url"

  4. ruby-on-rails - Rails 基本 Base64 身份验证 - 2

    我正在尝试复制此GETcurl请求:curl-D--XGET-H"Authorization:BasicdGVzdEB0YXByZXNlYXJjaC5jb206NGMzMTg2Mjg4YWUyM2ZkOTY2MWNiNWRmY2NlMTkzMGU="-H"Content-Type:application/json"http://staging.example.com/api/v1/campaigns在Ruby中，通过电子邮件+apikey生成身份验证:auth="Basic"+Base64::encode64("test@example.com:4c3186288ae23fd9661c

  5. Simulink方法总结和避坑指南（一）——Simulink入门与基本调试方法 - 2

    文章目录一、项目场景二、基本模块原理与调试方法分析——信源部分：三、信号处理部分和显示部分：四、基本的通信链路搭建：四、特殊模块：interpretedMATLABfunction：五、总结和坑点提醒一、项目场景  最近一个任务是使用simulink搭建一个MIMO串扰消除的链路，并用实际收到的数据进行测试，在搭建的过程中也遇到了不少的问题（当然这比vivado里面的debug好不知道多少倍）。准备趁着这个机会，先以一个很基本的通信链路对simulink基础和相关的debug方法进行总结。  在本篇中，主要记录simulink的基本原理和基本的SISO通信传输链路（QPSK方式），计划在下篇记

  6. H2数据库配置及相关使用方式一站式介绍（极为详细并整理官方文档） - 2

    目录H2数据库入门以及实际开发时的使用1.H2数据库的初识1.1H2数据库介绍1.2为什么要使用嵌入式数据库？1.3嵌入式数据库对比1.3.1性能对比1.4技术选型思考2.H2数据库实战2.1H2数据库下载搭建以及部署2.1.1H2数据库的下载2.1.2数据库启动2.1.2.1windows系统可以在bin目录下执行h2.bat2.1.2.2同理可以通过cmd直接使用命令进行启动：2.1.2.3启动后控制台页面：2.1.3spring整合H2数据库2.1.3.1引入依赖文件2.1.4数据库通过file模式实际保存数据的位置2.2H2数据库操作2.2.1Mysql兼容模式2.2.2Mysql模式

  7. ruby - 如何让 ruby​​-prof 忽略 Ruby 核心/标准库/gem 方法？ - 2

    我是Ruby分析的新手，看起来像ruby-prof是一个受欢迎的选择。我刚刚安装了gem并调用了我的程序:ruby-prof./my-prog.rb但是，输出非常冗长，因为包含所有Ruby核心和标准库方法以及其他gem的分析数据。例如，前三行是:8.790.0110.0100.0000.0013343*String#%7.280.0780.0090.0000.0692068*Array#each4.930.0380.0060.0000.0321098*Array#map这对我来说不是什么有用的信息，因为我已经知道我的程序经常处理字符串和数组，并且大概已经对这些类进行了优化。我只关心我代

  8. ruby - 是否有 Rack::Session::Cookie 用法的基本示例？ - 2

    我找不到任何使用Rack::Session::Cookie的简单示例，并且希望能够将信息存储在cookie中，并在以后的请求中访问它并让它过期.这些是我能找到的唯一示例:HowdoIset/getsessionvarsinaRackapp?http://rack.rubyforge.org/doc/classes/Rack/Session/Cookie.html这是我得到的:useRack::Session::Cookie,:key=>'rack.session',:domain=>'foo.com',:path=>'/',:expire_after=>2592000,:secret=

  9. ruby - 具有基本身份验证和 gzip 的 em-http 流挂起 - 2

    我正在尝试使用GnipPowerTrackAPI，这需要我使用基本身份验证连接到JSON的HTTPS流。我觉得这应该是相当微不足道的，所以我希望一些比我聪明的ruby​​ist可以指出我明显的错误。这是我的ruby​​1.9.3代码的相关部分:require'eventmachine'require'em-http'require'json'usage="#{$0}"abortusageunlessuser=ARGV.shiftabortusageunlesspassword=ARGV.shiftGNIP_STREAMING_URL='https://stream.gnip.com:4

  10. [面试直通版]操作系统核心之进程、线程与协程(下) - 2

    点击->操作系统复习的文章集目录操作系统线程线程是什么进程与线程的关系用户态/内核态操作系统资源管理内核态用户态内核态/用户态切换程序运行类型分析计算密集型IO密集型结合进程，线程来理解程序运行类型分析协程基础上下文切换协程协程为什么叫协作式线程？协程的优缺点操作系统线程典型问题：简述进程和线程的区别以下内容带您一步步了解线程是什么比进程更小的独立运行的基本单位-线程(Threads)线程的提出主要是为了提高系统内程序并发执行的程度，从而进一步提升系统的吞吐量，充分发挥多核CPU的优越性而设计的引入进程是为了操作系统更加方便地管理程序，使得多个程序能并发管理和执行而线程则是为了减少程序在并发执

随机推荐