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

Redux简单使用

redux可以说是一个可以预测状态的容器,什么叫做可预期???

指我们在对state进行各种操作时果是一定的。即以相同的顺序对state执行相同的操作会得到相同的结果。

简单来说,Redux中对状态所有的操作都封装到了容器内部,外部只能通过调用容器提供的方法来操作state,而不能直接修改state。这就意味着外部对state的操作都被容器所限制,对state的操作都在容器的掌控之中,也就是可预测。

总的来说,Redux是一个稳定、安全的状态管理器。

在这里插入图片描述
这个位置我们修改count的时候也要同时修改我们的countspan,这里我们进行的是手动的绑定,这样会非常的麻烦,我们可以使用redux来进行自动的绑定

网页中使用redux的步骤;

1.引入redux核心包

2.创建reducer整合函数

reducer两个参数,reduce的返回值就是新的state的值
第一个参数state代表当前的state,可以根据这个state来生成新的state
第二个参数是一个js对象,里面会存储操作的信息

在这里插入图片描述

**3.通过reducer对象创建store,**将sotr中的state进行订阅,我们希望的是我们state发生变化的时候,我们的元素或者ui组件随之变化。

第一个参数是reducer,当我们调用dis函数的时候,会触发reducer函数,然后执行里面的函数,第二个参数是初始值!!!第二个参数可以在reducer(state=1,action)中分配,也可以通过下面这种方式来设置,必须设置

在这里插入图片描述

4.对store中的state进行订阅

在这里插入图片描述
用subscribe来绑定,参数是一个回调函数

5.通过dispatch派发state的操作指令

当我们调用的时候我们需要传一个对象作为参数,来指定操作类型!!!

在这里插入图片描述

相关文章:

  • 【VScode】VScode+如何从git上面拉取代码?
  • DiT论文精读Scalable Diffusion Models with Transformers CVPR2023
  • 30 番外5 AHK语法应用实战
  • 学校开展第二届教学名师沙龙
  • Scala OOP
  • 软考 系统架构设计师系列知识点之软件可靠性基础知识(2)
  • vmware安装centos 7.9 操作系统
  • 如何做代币分析:以 TRX 币为例
  • 【Java多线程】面试常考——锁策略、synchronized的锁升级优化过程以及CAS(Compare and swap)
  • 第二十篇-推荐-纯CPU(E5-2680)推理-llama.cpp-qwen1_5-72b-chat-q4_k_m.gguf
  • InnoDB锁介绍
  • vue2后台管理系统demo,包含增删查改、模糊搜索、分页
  • 【PyTorch深度学习项目实战100例】—— 基于Conv3D实现三维立体MNIST数据集分类 | 第54例
  • 当心!你的App 可能是山寨的
  • 前端面试问题(5)
  • 十年网安行业代表性案例出炉,中睿天下Web攻击溯源案例实力入选
  • ARMv8/ARMv8的TLB深度学习
  • 【建议背诵】2022下半年软考「集成」100题(8)
  • 昇腾AI室外移动机器人学习指南(1 前言)
  • 【100个 Unity实用技能】| Unity中 检查当前设备网络状态 的几种方法整理
  • Db2数据库计算年龄
  • C++继承时常见问题
  • 【带你了解C语言预处理指令】
  • SLAM本质剖析-Boost之Geometry函数大全(一)
  • 4、MySQL数据管理
  • 谈谈测试员的地位:此刻,我想为所有从事测试职业的人发声…
  • DBCO-PEG12-Maleimide,DBCO-PEG12-Mal具有DBCO和Maleimide巯基反应试剂
  • 在Spring Boot项目中使用统一返回结果
  • 249 - 数据流
  • 程序员日均写7行代码被开除,这个行业真的还是普通人的最优选吗
  • NVIDIA VPI架构解析
  • 在字节跳动干了3年测试开发,30岁即将退休的我,告诉你软件测试的真实就业前景