当前位置: 首页 > news >正文

Redux基础知识

redux是什么

1. 介绍

  1. redux是一个专门用于做状态管理的JS库(不是react插件库)。
  2. 它可以用在react, angular, vue等项目中, 但基本与react配合使用。
  3. 作用: 集中式管理react应用中多个组件共享的状态。

2.什么情况下需要使用redux

  1. 某个组件的状态,需要让其他组件可以随时拿到(共享)。
  2. 一个组件需要改变另一个组件的状态(通信)。
  3. 总体原则:能不用就不用, 如果不用比较吃力才考虑使用。

核心概念

Store:Store 是 Redux 应用的核心,它包含了应用的整个状态树。可以把它想象成一个保存应用所有状态数据的 “容器”,并且整个应用只有一个 Store。
State:State 表示应用在某一时刻的状态。它是一个普通的 JavaScript 对象,包含了各种数据,如用户信息、UI 状态、异步操作的加载状态等。
Action:Action 是描述发生了什么事情的对象。它是 Store 数据的唯一来源,必须包含一个type属性来表示动作的类型,还可以包含其他数据,用于传递与该动作相关的信息。
Reducer:Reducer 是一个纯函数,它接收当前的state和一个action,根据action的type来决定如何更新state,并返回新的state。它是 Redux 中更新状态的唯一方式,并且不能有任何副作用。

基本工作流程

发起 Action:用户在应用中进行操作,如点击按钮、输入文本等,这些操作会触发相应的action。
Store 接收 Action:Store接收到action后,会将其传递给reducer。
Reducer 更新 State:reducer根据action的type对当前state进行更新,并返回新的state。
Store 更新状态:Store使用reducer返回的新state替换旧state。
视图更新:Store状态发生变化后,会通知相关的视图组件,视图组件根据新的状态重新渲染,以反映出应用状态的变化。


相关文章:

  • c++学习小结
  • Fedora 43 计划移除所有 GNOME X11 相关软件包
  • 泛型进阶之通配符
  • 备忘录模式 (Memento Pattern)
  • 元组类型的特性与应用场景:深入理解元组在 TypeScript 中的使用
  • vue3获取麦克风权限通过websocket进行通话
  • Group By Sets语法
  • 计算机二级MS Office第九套演示文稿
  • 数据结构与算法学习笔记(Acwing提高课)----动态规划·最长上升子序列模型
  • 【Linux系统】Ext系列文件系统
  • 【黑马JavaWeb+AI知识梳理】前端Web基础01 - HTML+CSS
  • Java进阶--面向对象设计原则
  • 大规模数据同步后数据总条数对不上的系统性解决方案:从字段映射到全链路一致性保障
  • Sam算法基本原理解析
  • CPU与GPU的功能与区别解析
  • 运维面试情景题:如果有一块新的硬盘要加入机架如何配置;如果新加了一台服务器,如何配置安全措施
  • DeepSeek预训练追求极致的训练效率的做法
  • 2025.04.26-淘天春招笔试题-第三题
  • MQL5教程 06 EA开发实战
  • 【OSG学习笔记】Day 11: 文件格式与数据交换
  • 央视曝光假进口保健品:警惕!保税仓发货不等于真进口
  • 当代视角全新演绎,《风雪夜归人》重归首都剧场
  • 五一假期上海路网哪里易拥堵?怎么错峰更靠谱?研判报告来了
  • 当哲学与戏剧作为一种生活方式——《人生六戏》分享会
  • 期待会师!神二十与空间站完成对接
  • 民生访谈|马拉松中签率低何解?预付费监管落实得如何?市体育局回应