Redux基本使用和实践

news2025/1/20 10:45:27

Redux的核心是store,store作为应用状态的容器,保存着这个页面的状态数据树。

store

但是store本质上是一个JavaScript对象,这个对象含有了dispatch以及获取页面状态数据的方法等等。

在这里插入图片描述
如上图所示,store提供几个方法给开发者调用:

  1. dispatch(action):派发action;
  2. subscribe(listener):订阅页面状态数据,也就是store中的state;
  3. getState:获取当前页面状态数据树;
  4. replaceReducer(nextReducer):这个方法很少使用到。

当应用引入Redux后,通过redux.createStore方法来创建应用的store,这就生成一个对象实例。比如:

	import {createStore}  from  'redux';
	const store = createStore(reducer,preloadedState,enhancer);

参数reducer是必传参数,创建store的同时,也必须定义好reducer函数,通过reducer函数,来通知store数据状态是如何根据action来进行更新的。

preloadedState:是应用的初始状态。

action

action是描述了状态变更的信息,通过dispatch来派发。redux规定了action对象需要有一个type属性,来保证action的唯一性。

除此之外,action可以携带其他数据信息,这些数据信息的属性就没有限制了。比如:

const action = {
	type: "AAA",
	data: {
		name:"aaa"
	}
}

一般情况下,action携带的信息,是页面动态输入的,所以我们可以定义action相关的函数:

const action = data=>({type:"AAA",data});

之后就通过dispatch来派发action,代码如下:

store.dispatch(action(908));

由此可以看出,action就是描述了一个状态变化,这个状态包含了type属性和变化的信息。

然而,真正将这些变化转为数据状态的是reducer函数。reducer必须是一个纯函数,来保证数据变化的可预测性。比如现在要定义一个变更状态的函数:changesState()。

const changesState = (prevState={},action)=>{
	switch(action.type){
		case:'AAA':
			return:action.data
		default:
			return prevState;
	}
}

一般情况下,reducer函数会处理多了action。

这就是Redux基本使用。

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

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

相关文章

[论文阅读笔记75]P-Tuning v2

1. 基本信息 题目论文作者与单位来源年份P-Tuning v2: Prompt Tuning Can Be Comparable to Fine-tuning Universally Across Scales and TasksXiao Liu等Tsinghua University清华大学2021 Citations, References 论文链接:https://arxiv.org/pdf/2110.07602.pdf…

chatgpt赋能python:Python的IDLE是什么?——初探IDLE的用途和功能

Python的IDLE是什么?——初探IDLE的用途和功能 Python的IDLE是一个Python集成开发环境(IDE),可以简单地将其视为为开发者提供编写、调试和执行代码的工具。IDLE包括一个交互式解释器,使开发更加快速和简便。它还提供了代码编辑器、调试器和其…

chatgpt赋能python:Python技巧:一行代码实现所有数据的输出

Python技巧:一行代码实现所有数据的输出 Python是一种高级动态语言,因其简单易学和灵活性而广受欢迎。Python的语法简单明了,适合初学者学习、理解和实践,同时也是专业程序员的首选开发语言之一。 在实际的编程中,有…

k8s简单部署示例

1 部署yaml文件 1.1 Deployment部署 apiVersion: apps/v1 kind: Deployment metadata:name: zscorenamespace: wangzy-plabels:app: zscore-dep spec:replicas: 1selector:matchLabels:app: zscoretemplate:metadata:labels:app: zscoreannotations:sidecar.istio.io/inject:…

[工业互联-9]:EtherCAT(以太网控制自动化技术)+TwinCAT 在生产自动化控制中的应用 、

前言 EtherCAT(以太网控制自动化技术)是一个开放架构,以以太网为基础的现场总线系统,其名称的CAT为控制自动化技术(Control Automation Technology)字首的缩写。EtherCAT是确定性的工业以太网,…

Android 源码 AOSP版本– 下载[Ubuntu ]

Android 源码 AOSP版本– 下载[Ubuntu ] 前言配置下载源码前言 Android系统作为一个庞大的开源项目,除了一些谷歌自带服务之外,其他所有代码均以AOSP(Android Open Source Project)的形式开源。对于框架开发者来说,熟悉AOSP是必不可少的知识。即使是普通开发者,为了优化…

POSTGRES 多条件数量统计---CASE WHEN 妙用

创建表 create table tbl_user( id serial PRIMARY KEY, name varchar(256), addr varchar(256), age int, score int, fav varchar(256) ) 插入预置数据 INSERT INTO tbl_user (name, addr, age, score, fav) VALUES (aaa,aaa_addr,10, 23,aaa_fav_new), (bbb,ccc_addr,10, 23…

chatgpt赋能python:Python之妙用一行输出一个数字

Python之妙用一行输出一个数字 在日常编程中,我们常常需要输出一些数字来进行调试或测试。而在Python中,一行代码就可以轻松实现这个过程,即一行代码输出一个数字。 Python的print()函数 在Python中,print()函数是最基本的输出…

CPU lock-step资料整理

知识的价值在于分享,欢迎大家批评指正,共同进步。 目录 1 功能安全 2 技术特性 3 安全系统架构 4 TI Hercules系列 4.1 TMS570安全概念基本原理 4.1.1 1oo1D双核安全概念 4.1.2 1oo1D优势 总结 参考文献 1 功能安全 根据ISO26262-2018&#xff0…

踩坑集锦之Mybaits Invalid bound statement异常

踩坑集锦之Mybaits Invalid bound statement 引言多数据源场景下Mybaits如何进行配置包扫描过程问题一: 自动注入带来的同类型bean实例冲突问题二: 扫描器扫描路径重叠,导致优先级低的扫描器扫描不到对应包路径下的mapper接口补充说明1: MapperScannerConfigurer补充…

编译tolua——1、编译工具和环境说明

大家好,我是阿赵。 之前有朋友问我编译tolua相关的问题。虽然网上也有很多相关的资料可以查询,但我感觉自己也写一篇,作为一个记录也不错。不过一篇文章要把所有内容都说完,可能有点长,所以把整个过程分开几篇文章写一…

图文并茂五分钟搞懂react中的reducer

什么是 reducer 函数? 为什么要用 reducer? Reducer 是处理状态的另一种方式。通俗来讲,就是可以让你的复杂组件更加干净,代码更加优雅当你的组件里有好多个状态更新逻辑,并且有些是有一定关联性的,写多个useState会看起来很杂…

SPIFlash-W25QXX使用总结

W25QXX简介 W25QXX,后面的XX指的是Mbit 常见的型号有: W25Q80 W25Q16 W25Q32 W25Q64 W25Q128 注意80是表示8而不是80 所以,换算成字节数,从上到下为: 1MB 2MB 4MB 8MB 16MB 整个flash分成多个块,一个块分成…

Linux配置MySQL环境(三)

Linux配置MySQL环境 一、下载1. 官网下载MySQL2. 百度网盘快速下载MySQL 二、安装1、通过 Xftp 将 MySQL 安装包拷贝到 Linux2、解压缩3、安装 common、libs、client、server4、初步连接 三、卸载四、常用设置1. 修改 root 用户密码 五、使用新密码登录六、开启远程访问七、开放…

购物车按钮

先看效果&#xff1a; 再看代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>购物车按钮展示</title><link href"https://fonts.googleapis.com/css?familyInter:400…

002Mybatis初始化引入

引入依赖 <dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId> </dependency> 自动检测工程中的DataSource创建并注册SqlSessionFactory实例创建并注册SqlSessionTemplate实例自…

chatgpt赋能python:Python中如何输入一个列表?

Python中如何输入一个列表&#xff1f; 如果你正在使用Python编程语言&#xff0c;那么输入一个列表是很常见的任务。列表是Python中最常用的数据类型之一&#xff0c;它允许我们在一个变量中存储多个值。在这篇文章中&#xff0c;我们将介绍如何使用Python语言输入一个列表&a…

chatgpt赋能python:Python中的16进制输出:从基础到应用

Python中的16进制输出&#xff1a;从基础到应用 在计算机编程中&#xff0c;16进制是一种非常重要的数字系统。对于Python工程师来说&#xff0c;熟练地掌握16进制输出技能非常重要&#xff0c;因为它能够帮助你更好地理解和分析二进制数据。 在本篇文章中&#xff0c;我们将…

JavaSE-03 【流程控制语句】

第一章 流程控制 1.1 流程概述 在一个程序执行的过程中&#xff0c;每条语句的执行顺序对程序的结果是由直接影响的&#xff0c; 也就是&#xff0c;语句的流程对运行结果有着直接的影响&#xff0c;所以&#xff0c;必须清楚知道每条语句的执行流程&#xff0c; 并且&#x…

Gossip分布式通信协议副本管理器说明

Gossip中副本管理器 副本管理器状态 不考虑应用时一个副本管理器应该有的状态&#xff1a; 值&#xff0c;这是由副本管理器维护的应用状态的值&#xff0c;每个副本管理器是一个状态机。起始于一个特定的初始值。此后的状态完全由更新操作决定。值的时间戳&#xff1a;代表更…