redux的理解及其工作原理?工作流程?

2023-11-10

理解:

        redux是一个用于管理JavaScript应用程序状态的可预测状态容器,它是一个独立于任何特定UI库的状态管理库,但在React应用中广泛使用。

工作原理可以概括为一下几个关键概念:

        1. store(存储) : redux应用的状态(State)被存储在一个单一的Javascript对象中,称为store。它是应用中所有状态的唯一来源。

        2.action(动作) : action是一个描述状态变化的普通的JavaScript对象,它必须包含一个type属性,用于指示要执行的动作类型。其他属性可以根据需要自定义,用于传递与动作相关的数据。

        3.reducer(归约器):reducer是一个纯函数,它接受当前的状态和一个action作为参数,并返回一个新的状态,reducer根据action的类型来决定如何更新状态,纯函数即是相同的输入,始终返回相同的输出,而且不应该有任何副作用。

        4.dispatch(派发) : dispatch是一个函数,用于将action发送到reducer,以触发状态的更新。当应用中某个组件需要更新状态时,它会调用dispatch函数并传递给一个action对象

        5.subscribe(订阅) : 通过订阅,可以在状态发生变化时得到通知,当状态发生变化时,redux会调用所有已注册的订阅函数,更UI

工作流程:

        1.组件通过dispatch函数派发一个action。

        2.redux store 接收到action,并将其传递给reducer

        3.reduce根据action的类型来更新状态,并返回 一个新的状态。

        4.redux store将新的状态保存起来

        5. redux store 通知所有已注册的订阅函数,以便更新函数的UI

        

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

redux的理解及其工作原理?工作流程? 的相关文章

随机推荐

  • 解决Windows10中文用户名带来软件无法打开的影响

    众所周知 许多国外的开发软件都不支持中文的文件路径名 即使软件的路径无中文字符 可你系统用户的名称是中文 同样软件无法运行 因为大部分软件的在电脑用户上的缓冲文件都是在 C user 你的用户名称 AppData local temp 解决
  • Power BI和Tableau对比分析,到底要学哪个?

    Power BI和Tableau对比分析 到底要学哪个 一 两个工具优缺点 Power BI Tableau 二 职业需求 前程无忧 智联招聘 三 总结 学习tableau还是power bi想必是很多初学者的疑惑 可以从以下两个角度去考虑
  • 一台服务器想用150个ip,可以吗?

    不可以 一台服务器一次只支持一个ip 可以更换 但每次绑定一个 如果需要多个ip 只能多开服务器 挂店铺的 包括淘宝店铺 拼多多店铺 亚马逊店铺都想店铺不被关联 想买台服务器 可以的 一个店铺买一台服务器 有几个店铺就买几台服务器 ip的带
  • 数据结构:(代码篇:004)二叉搜索树 BST(二叉查找树)的基本操作

    1 基本概念 二叉搜索树 是二叉树是真子集 要求 根节点大于或等于左子树的节点值 小于右子树的节点值 他的中序遍历是有序的 基本操作有 查找 插入 删除 建树 查找和插入以及建树都很简单 和二叉树的差不多 删除略微复杂 2 存储结构 str
  • Apche Kafka + Spring的消息监听容器

    目录 一 消息的接收 1 1 消息监听器 二 消息监听容器 2 1 实现方法 2 1 1 KafkaMessageListenerContainer 2 1 1 1 基本概念 2 1 1 2 如何使用 KafkaMessageListene
  • SpringMVC异常处理

    1 概述 SpringMVC 框架处理异常的常用方式 使用 ExceptionHandler 注解处理异常 2 ExceptionHandler注解和用 ControllerAdvice注解 2 1 ExceptionHandler注解 使
  • VIVADO软件错误及解决办法汇总

    在VIVADO软件编写程序时会遇到很多类型的错误 写个博客记录下来防止再犯 短期可能只有几个问题 会长期保持更新 遇到问题就记录 2022 4 09 问题1 The debug port u ila 0 probe4 has 1 uncon
  • 盘点C# 8.0中好用的特性

    增加引用类型可为null 如果参数t是null 则会发出警告 public static void Test
  • CocosCreator3.8研究笔记(十八)CocosCreator UI组件(二)

    前面的文章已经介绍了Canvas 组件 UITransform 组件 Widget 组件 想了解的朋友 请查看 CocosCreator3 8研究笔记 十七 CocosCreator UI组件 一 今天我们主要介绍CocosCreator
  • OPENCV基础(图像,视频)

    文章目录 1 图像读取 展示 写入 2 视频读取 展示 写入 1 图像读取 展示 写入 使用cv imread 函数读取图像 使用函数cv imshow 在窗口中显示图像 使用函数cv imwrite 保存图像 import numpy a
  • InputStream为什么不能被重复读取?

    最近上传阿里云的时候同一个文件上传两个服务地址 第一个文件读取以后第二个再去读取就拿不到了 代码如下 内网上传OSS获取key值 String ossKey OSSClientUtil getOSSURL endpoint accessKe
  • kali linux 安装搜狗输入法(解决安装后只有搜狗五笔的问题)

    kali 安装搜狗输入法 解决安装后之后只有搜狗五笔的问题 第一步 去搜狗输入法的官方网站下载搜狗输入法 https pinyin sogou com linux 下载后打开文件所在路径 sougoupinyin 2 3 1 0112 am
  • unity读取json文件乱码以及Invalid character 'v' in input string异常解决方案

    先说PC端吧 PC端乱码很容易解决 itemsTable JsonMapper ToObject File ReadAllText Application dataPath Scripts Json itemsTable json Enco
  • Linux 安装软件 常见问题 x86 or x64

    Linux 安装软件 常见问题 x86 or x64 平民资料 x64 是指CPU是64位版本的 x86 是指CPU是32位版本的 如果你的CPU是64位的 可以安装64位的 也可以安装32位的 反过来只能安装32位的 RedHat Lin
  • React 路由基本使用

    代码示例 有Logint和Layout组件 import React from react import BrowserRouter as Router Redirect Route Switch from react router dom
  • python重命名文件excel,在excel电子表格的文件夹python上重命名多个文件

    I am pretty new at Python and I want to automate a process that takes a lot of my time but now I need to rename about 20
  • js 如何判断属性,包括多级对象的状况

    js目前没有一个明确的方法去判断对象是否存在 尤其是出现多级属性 对象 的情况 一旦一个不存在的属性跨级取 就会报错 undefined 因此考虑封装一个通用的方法去专门检测 如果存在属性返回true 反之返回falsefunction c
  • # HTB-Tier2- Oopsie

    HTB Tier2 Oopsie Tags PHP Web Custom Applications Session Handling Apache Penetration Tester Level 1 Reconaisance Web Si
  • 在 uni-app 中选中奇偶子元素

    问题描述 在 uni app 中 使用 nth child 选择器选择奇偶子元素不像预期那样生效 原代码 nth child 2n 选择偶数个子元素 nth child 2n 1 选择奇数个子元素 奇数子元素 issueData item
  • redux的理解及其工作原理?工作流程?

    理解 redux是一个用于管理JavaScript应用程序状态的可预测状态容器 它是一个独立于任何特定UI库的状态管理库 但在React应用中广泛使用 工作原理可以概括为一下几个关键概念 1 store 存储 redux应用的状态 Stat