React(六)——Redux


文章目录

  • 项目地址
  • 基本理解
  • 一、配置Redux store
  • 二、创建slice配置到store里并使用
  • 三、给Slice配置reducers,用来修改初始值


项目地址

  • 教程作者:
  • 教程地址:
  • 代码仓库地址:
  • 所用到的框架和插件:
dbt 
airflow

基本理解

store: 类似于一个全局函数,使得你在程序的任何地方都可以访问到里面的数据和方法,由多个Slice组成
action:type用来指定操作,payload:则是需要改变的数据
reducer:根据action的type和payload,来执行type的的动作,payload的数据,不会直接修改数据,只是复制

一、配置Redux store

  1. state文件夹下,创建store.js
import { configureStore } from "@reduxjs/toolkit";export const store = configureStore({reducer: {},
});
  1. src/index.js下,将store配置给App
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<React.StrictMode><Provider store={store}><App /></Provider></React.StrictMode>
);

二、创建slice配置到store里并使用

  1. state文件夹下创建settingsSlice使用createSlice()创建

在这里插入图片描述
2. 将上面的slice导入到store里

import { configureStore } from "@reduxjs/toolkit";
import settingsReducer from "./settingsSlice";export const store = configureStore({reducer: {settings: settingsReducer,},
});
  1. 使用useSelector访问state管理器的settingsSlice

在这里插入图片描述

三、给Slice配置reducers,用来修改初始值

  1. settingsSlice里配置自己的reducer,并导出

在这里插入图片描述

  1. 使用

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/61820.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

国家级资质!同驭汽车获得CNAS实验室认证

近日&#xff0c;同驭汽车科技顺利通过中国合格评定国家认可委员会&#xff08;简称CNAS&#xff09;评审&#xff0c;获得《中国合格评定国家认可委员会实验室认可证书》。这标志着同驭已建立国际标准的实验室管理体系&#xff0c;产品的试验与检测技术能力达到了国际认可的准…

基于物联网设计的人工淡水湖养殖系统(华为云IOT)_253

文章目录 一、前言1.1 项目介绍【1】项目开发背景【2】设计实现的功能【3】项目硬件模块组成【4】设计意义【5】国内外研究现状【6】摘要1.2 设计思路1.3 系统功能总结1.4 开发工具的选择【1】设备端开发【2】上位机开发1.5 参考文献1.6 系统框架图1.7 系统原理图1.8 实物图1.9…

HTML5好看的音乐播放器多种风格(附源码)

文章目录 1.设计来源1.1 音乐播放器风格1效果1.2 音乐播放器风格2效果1.3 音乐播放器风格3效果1.4 音乐播放器风格4效果1.5 音乐播放器风格5效果 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&…

快速简单的视频下载器——lux

文章目录 前言1.环境检查1.1 检查 lux 安装1.2 检查FFmpeg安装1.3 备注 2. lux指令2.1 无OPTIONS2.2 -i 指令2.3 - f 指令2.4 -c 指令2.5 -o 指令2.6 备注 3.结语 前言 在学习之余&#xff0c;发现了一个简单并且高效的视频下载器lux,能够帮你快速且高效的下载文件&#xff08…

linux ubuntu的脚本知

目录 一、变量的引用 二、判断指定的文件是否存在 三、判断目录是否存在 四、判断最近一次命令执行是否成功 五、一些比较符号 六、"文件"的读取和写入 七、echo打印输出 八、ubuntu切换到root用户 N、其它可以参考的网址 脚本功能强大&#xff0c;用起来也…

ROS2 细节知识学习

1. rosidl_generate_interfaces() 在 ROS2 中&#xff0c;rosidl_generate_interfaces是一个关键的构建工具功能。它主要用于从接口定义文件&#xff08;如.msg消息文件、.srv服务文件和.action动作文件&#xff09;生成不同编程语言&#xff08;如 C、Python 等&#xff09;可…

Python爬虫进阶实战项目:使用青果网代理高效爬取某手办网详情数据

1 引言 计算机&#xff0c;获取数据&#xff0c;还在慢慢复制粘贴&#xff1f;聪明的朋友都已经用爬虫高效获取数据&#xff0c;但是经常搞爬虫遇见ip管控防爬&#xff0c;咱们怎么处理&#xff1f;在我看来随着数据需求增加&#xff0c;爬虫成为高效获取数据的工具。然而&…

【kubernetes】kubernetes各组件的调用关系

目录 1. 说明2. Kubernetes组件概述2.1 控制平面组件2.2 节点组件 3. Kubernetes组件调用关系4. 示例说明 1. 说明 1.Kubernetes是一个开源的容器编排工具&#xff0c;其各个组件之间存在着复杂的调用关系&#xff0c;共同构建起一个完整的容器编排系统。2.Kubernetes集群主要…

大语言模型---Llama7B和Llama8B的区别;模型参数量;权重文件的不同;嵌入层权重的不同;输入序列长度的不同;应用场景

文章目录 1.概要2. 模型参数量3. 权重文件的不同4. 嵌入层权重的不同5. 输入序列长度的不同6. 应用场景 1.概要 LLaMA&#xff08;Large Language Model Meta AI&#xff09;是由Meta开发的一系列语言模型&#xff0c;其中不同版本的参数量&#xff08;如7B、8B等&#xff09;…

Linux命令思维导图

看到一个很不错的Linux命令思维导图&#xff0c;用机器翻译了一下&#xff0c;建议收藏备用。 附上英文版&#xff1a;

C++自动化测试:GTest 与 GitLab CI/CD 的完美融合

在现代软件开发中&#xff0c;自动化测试是保证代码质量和稳定性的关键手段。对于C项目而言&#xff0c;自动化测试尤为重要&#xff0c;它能有效捕捉代码中的潜在缺陷&#xff0c;提高代码的可维护性和可靠性。本文将重点介绍如何在C项目中结合使用Google Test&#xff08;GTe…

查询mysql用户信息及授权

SELECT user, host, account_locked, password_expired, password_last_changed, password_lifetime FROM mysql.user;user: 用户名。 host: 用户允许连接的主机。 account_locked: 账户是否被锁定。 password_expired: 密码是否已过期。 password_last_changed: 密码上…

算法模板2:位运算+离散化+区间合并

文章目录 1.6 位运算**位运算的常见应用**1.7 离散化**经典离散化题目例子****1. 区间合并和覆盖长度问题****2. 区间查询与修改****3. 动态求第 K 小值****4. 区间最大重叠次数****5. 动态逆序对计数****6. 二维区间问题****7. 模拟车流/时间段事件****8. 区间众数统计** **具…

【淘汰9成NLP面试者的高频面题】LSTM中的tanh和sigmoid分别用在什么地方?为什么?

博客主页&#xff1a; [青松] 本文专栏: NLP 大模型百面百过 【淘汰9成NLP面试者的高频面题】LSTM中的tanh和sigmoid分别用在什么地方&#xff1f;为什么&#xff1f; 重要性&#xff1a;★★★ &#x1f4af; 本题主要考察面试者对以下问题的理解&#xff1a; ① 数据特征和模…

【中间件】Redis

一、什么是Redis Redis是一个开源&#xff08;BSD许可&#xff09;&#xff0c;内存存储的数据结构服务器&#xff0c;可用作数据库&#xff0c;高速缓存和消息队列代理。它支持字符串、哈希表、列表、集合、有序集合&#xff0c;位图&#xff0c;hyperloglogs等数据类型。内置…

Python爬取豆瓣电影全部分类数据并存入数据库

在当今数字化的时代&#xff0c;网络上丰富的影视资源信息吸引着众多开发者去挖掘和利用。今天&#xff0c;我就来和大家分享一段有趣的代码&#xff0c;它能够从豆瓣电影平台获取相关数据并存储到数据库中哦。 结果展示&#xff08;文末附完整代码&#xff09;&#xff1a; 目…

YOLOv11(Ultralytics)视频选定区域目标统计计数及跟踪

在计算机视觉的众多应用场景中&#xff0c;对特定区域的目标进行检测、跟踪与计数是一个常见且重要的需求。无论是在智慧交通中统计通过特定路口的车辆数量&#xff0c;还是在零售分析中追踪进入特定区域的顾客行为&#xff0c;这一功能都发挥着不可或缺的作用。 随着深度学习…

数据结构与算法——1120——时间空间效率问题求边界值

目录 1、效率问题 1、时间复杂度 1、O(1) 2、O(n) 3、O(n) 或O(n*log2n)——n倍的log以2为底n的对数 例题 4、O(n) 2、空间复杂度 3、数组和链表 2、面试题之求边界值 题目 解答 &#xff08;1&#xff09;-i &#xff08;2&#xff09;~i &#xff08;3&#x…

第三十九篇 ShuffleNet V1、V2模型解析

摘要 ShuffleNet V1 ShuffleNet V1是由旷视科技&#xff08;Megvii&#xff0c;又称Face&#xff09;在2017年底提出的一种轻量级卷积神经网络架构。该网络专为移动设备和边缘计算环境设计&#xff0c;旨在以较低的计算资源实现高效的图像分类和其他计算机视觉任务。 特点与…

本地推流,服务器拉流全流程

本地推流&#xff0c;服务器拉流全流程 环境准备&#xff1a;准备一台服务器&#xff0c;其中openssl最好为1.1.1版本&#xff08;可以直接使用ubuntu20.04操作系统&#xff09; 服务器拉流 1、 安装环境依赖 sudo apt-get update sudo apt-get install unzip sudo apt-get…