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

第56节——redux-toolkit中的createAction——了解

一、概念

createAction 是一个用于创建 Redux action creator 的函数,它可以让你更快地编写 Redux 相关的代码,并且更加易于阅读和维护。

二、简单示例

使用 createAction,你只需要传入一个字符串类型的 action type,然后它会返回一个新的函数,这个函数就是 Redux action creator。当你调用这个新的函数时,它会返回一个包含 type 属性的普通 JavaScript 对象,这个对象就是 Redux 中的 action。

import { createAction } from '@reduxjs/toolkit'const increment = createAction('counter/increment')// 使用新的action creator
dispatch(increment()) // { type: 'counter/increment' }

三、使用createAction的好处

在实际使用中,createAction 的最大优点在于它可以自动创建 FSA(Flux Standard Action)规范的 action,即一个带有 type、payload 和 error 属性的 action。这使得我们在编写 Redux 相关的代码时,可以更加标准化和规范化,同时也能够更好地与其他库和工具集成。

import { createAction } from '@reduxjs/toolkit'const addTodo = createAction('todos/add', (text) => ({payload: { text }
}))// 使用新的action creator
dispatch(addTodo('Buy milk')) // { type: 'todos/add', payload: { text: 'Buy milk' } }

四、实际例子

1、创建reducers目录并创建user.js文件

import { createReducer } from "@reduxjs/toolkit";const userReducer = createReducer({age: 1,name: "张三",},(builder) => {builder.addCase("user/ageAdd", (state, action) => {state.age += 1;}).addCase("user/updateName", (state, action) => {state.name = action.payload.name;});}
);export default userReducer;

2、创建actions目录并创建user.js文件

import { createAction } from "@reduxjs/toolkit";/*** 接收两个参数* 第一个参数 要调用reducer的名字* 第二参数 是一个方法,接收调用时传过来的参数* 返回一个payload的对象*/
export const ageAdd = createAction("user/ageAdd", () => {return {payload: {},};
});export const updateName = createAction("user/updateName", (name) => {return {payload: {name,},};
});

3、在configureStore中挂载

import { configureStore, createReducer } from "@reduxjs/toolkit";
import userReducer from "./reducers/user";export const countReducer = createReducer({num: 1,},{/*** 接收两个参数* @param {} state 当前的状态* @param {*} action 页面上传过来的状态*/add: (state, action) => {// 在这里面可以直接修改state 不需要returnstate.num += 1;},}
);const store = configureStore({// reducer: countReducer,reducer: userReducer,
});export default store;

4、页面中使用

import { useSelector, useDispatch } from "react-redux";
import { ageAdd, updateName } from "./store/actions/user";export default function LearnReduxToolkit() {const state = useSelector((state) => state);const dispatch = useDispatch();return (<div><div>{state.name} - {state.age}</div><button onClick={() => dispatch(ageAdd())}>age + 1</button><inputtype="text"onChange={(event) => dispatch(updateName(event.target.value))}/></div>);
}

相关文章:

第56节——redux-toolkit中的createAction——了解

一、概念 createAction 是一个用于创建 Redux action creator 的函数&#xff0c;它可以让你更快地编写 Redux 相关的代码&#xff0c;并且更加易于阅读和维护。 二、简单示例 使用 createAction&#xff0c;你只需要传入一个字符串类型的 action type&#xff0c;然后它会返…...

【数据结构】排序--选择排序(堆排序)

目录 一 堆排序 二 直接选择排序 一 堆排序 堆排序(Heapsort)是指利用堆积树&#xff08;堆&#xff09;这种数据结构所设计的一种排序算法&#xff0c;它是选择排序的一种。它是 通过堆来进行选择数据。 需要注意的是排升序要建大堆&#xff0c;排降序建小堆。 直接选择排…...

C# 图解教程 第5版 —— 第2章 C# 和 .NET Core

文章目录 2.1 .NET 框架的背景2.2 为什么选择 .NET Core&#xff08;和 Xamarin&#xff09;2.3 .NET Core 的目标2.4 多平台支持2.5 快速发展和升级2.6 程序占用空间小、部署简单、版本问题少2.7 开源社区支持&#xff08;*&#xff09;2.8 改进的应用程序性能2.9 全新的开始&…...

数据结构 | Huffman TreeCode

构造参考&#xff1a; 赫夫曼树_关于huffman树,权值相同-CSDN博客 编码参考&#xff1a; 【数据结构与算法】-哈夫曼树(Huffman Tree)与哈夫曼编码_数据结构哈夫曼树编码-CSDN博客...

mysql拼接字符串函数

在MySQL中&#xff0c;可以使用CONCAT()函数来拼接字符串。CONCAT()函数接受一个或多个字符串作为参数&#xff0c;并将它们连接在一起。以下是CONCAT()函数的使用示例&#xff1a; 拼接两个字符串&#xff1a; SELECT CONCAT(Hello, , World); -- 输出: Hello World 拼接列中…...

python基础(5):深入理解 python 中的赋值、引用、拷贝、作用域

python基础(5):深入理解 python 中的赋值、引用、拷贝、作用域 目录 python基础(5):深入理解 python 中的赋值、引用、拷贝、作用域 1、先来看个问题吧: 2、引用 VS 拷贝: 3、增强赋值以及共享引用:...

《动手学深度学习 Pytorch版》 8.6 循环神经网络的简洁实现

import torch from torch import nn from torch.nn import functional as F from d2l import torch as d2lbatch_size, num_steps 32, 35 train_iter, vocab d2l.load_data_time_machine(batch_size, num_steps)8.6.1 定义模型 num_hiddens 256 rnn_layer nn.RNN(len(voca…...

leetcode做题笔记173. 二叉搜索树迭代器

实现一个二叉搜索树迭代器类BSTIterator &#xff0c;表示一个按中序遍历二叉搜索树&#xff08;BST&#xff09;的迭代器&#xff1a; BSTIterator(TreeNode root) 初始化 BSTIterator 类的一个对象。BST 的根节点 root 会作为构造函数的一部分给出。指针应初始化为一个不存在…...

RPA流程自动化的优势和好处

随着科技的发展&#xff0c;RPA机器人自动化过程已成为企业提高效率和降低人力成本的一种有效手段。RPA机器人可以模拟和执行人类操作&#xff0c;通过自动执行重复性和繁琐的任务&#xff0c;让员工能够将更多时间和精力投入到更有价值的工作中。 RPA(Robotic Process Automa…...

搭建 Hadoop 生态集群大数据监控告警平台

目录 一、部署 prometheus 环境 1.1 下载安装包 1.2 解压安装 1.3 修改配置文件 1.3.1 hadoop-env.sh 1.3.2 prometheus_config.yml 1.3.3 zkServer.sh 1.3.4 prometheus_zookeeper.yaml 1.3.5 alertmanager.yml 1.3.6 prometheus.yml 1.3.7 config.yml 1.3.8 t…...

课题学习(七)----粘滑运动的动态算法

一、 粘滑运动的动态算法 在实际钻井过程中&#xff0c;钻柱会出现扭振和粘滑现象&#xff08;粘滑运动–B站视频连接&#xff09;&#xff0c;但并不总是呈现均匀旋转。如下图所示&#xff0c;提取一段地下数据时&#xff0c;转盘转速保持在100 r/min&#xff0c;钻头转速在0-…...

python二次开发CATIA:测量曲线长度

以下代码是使用Python语言通过win32com库来控制CATIA应用程序的一个示例。主要步骤包括创建一个新的Part文件&#xff0c;然后在其中创建一个新的几何图形集&#xff0c;并在这个集合中创建一个样条线。这个样条线是通过一组给定的坐标点来创建的&#xff0c;这些点被添加到集合…...

从零开始学习调用百度地图网页API:二、初始化地图,鼠标交互创建信息窗口

目录 代码结构headbodyscript 调试 代码 <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><meta name"viewport" content"initial-scale1.0, user-scalable…...

Yarn基础入门

文章目录 一、Yarn资源调度器1、架构2、Yarn工作机制3、HDFS、YARN、MR关系4、作业提交之HDFS&MapReduce 二、Yarn调度器和调度算法1、先进先出调度器&#xff08;FIFO&#xff09;2、容量调度器&#xff08;Capacity Scheduler&#xff09;3、公平调度器&#xff08;Fair …...

element picker 时间控件,指定区间和指定月份置灰

直接上代码 <el-date-pickerv-model"fillingList.declareDate"type"month":disabled"isDisplayName"placeholder"选择填报时间"value-format"yyyy-MM":picker-options"pickerOptions"change"declareDate…...

thinkphp6

unexpected , expecting case (T_CASE) or default (T_DEFAULT) or } 在模板中应用{switch}{/switch}标签,报错,其实是switch的问题&#xff0c;模板解析后&#xff0c;switch:和第一个case:之间不能有有输出的&#xff0c;一个空格也不行&#xff0c;所以第一个要紧跟着 Thi…...

Android 13.0 USB鼠标右键改成返回键的功能实现

1.概述 在13.0设备定制化开发中,产品有好几个usb口,用来可以连接外设,所以USB鼠标通过usb口来控制设备也是常见的问题,在window系统中,鼠标右键是返回键的功能,可是android原生的系统 鼠标右键不是返回键根据产品开发需要鼠标修改成右键就需要跟代码, 2.USB鼠标右键改…...

超低延时 TCP/UDP IP核

实现以太网协议集当中的ARP、ICMP、UDP以及TCP协议 一、概述 TCP_IP核是公司自主开发的使用FPGA逻辑搭建的用于10G以太网通信IP。该IP能够实现以太网协议集当中的ARP、ICMP、UDP以及TCP协议。支持连接10G/25G以太网PHY&#xff0c;组成高速网络通信系统。该IP上传、下传数据B…...

Python与数据库存储

Python与数据库存储的最佳实践包括以下几个方面的内容&#xff1a; 连接数据库&#xff1a;使用合适的数据库连接库&#xff0c;如sqlite3、psycopg2、pymysql等来连接数据库。创建连接对象并通过该对象获取游标。 import sqlite3# 连接SQLite数据库 conn sqlite3.connect(sam…...

RN操作SQLite数据库的包(sqlite-helper.js)及其使用

先安装 yarn add react-native-sqlite-storagesqlite-helper.js工具包的具体代码 "use strict";var _interopRequireDefaultrequire("babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true…...

三菱现代自动擦窗机器人PLC软件:后发产品介绍及技术细节

三菱 现代自动擦窗机器人PLC软件 我们主要的后发送的产品有&#xff0c;带解释的梯形图接线图原理图图纸&#xff0c;io分配&#xff0c;组态画面 界面多种组态可供选择上周刚帮一个三菱现代贴牌擦窗机的小客户把新软件迭代完&#xff0c;顺便攒了一套带人话解释的梯形图、不…...

RT thread—iic—at24c04读写操作

at24c04介绍&#xff1a;存储容量&#xff1a;4 Kbits&#xff08;即 512 字节&#xff09;。内部结构为 32 页&#xff0c;每页 16 字节。地址0x000-0x1FF通信接口&#xff1a;标准 I2C&#xff08;时钟线 SCL 和数据线 SDA&#xff09;&#xff0c;支持最高 400 kHz 的快速模…...

【TCC从理论到亿级支付系统落地】:7个真实生产环境故障复盘+可直接套用的补偿模板

第一章&#xff1a;TCC分布式事务的核心原理与适用边界TCC&#xff08;Try-Confirm-Cancel&#xff09;是一种基于业务层面的柔性事务模型&#xff0c;其核心在于将一个分布式事务拆解为三个明确阶段&#xff1a;资源预留&#xff08;Try&#xff09;、最终确认&#xff08;Con…...

OPCUA结构体数据处理全解析:C#如何高效读写ExtensionObject中的复杂数据

OPCUA结构体数据处理全解析&#xff1a;C#如何高效读写ExtensionObject中的复杂数据 在工业自动化与物联网系统中&#xff0c;OPCUA协议已成为设备间数据交换的事实标准。当面对复杂的自定义结构体数据时&#xff0c;ExtensionObject的处理往往成为开发者的痛点。本文将深入剖析…...

OpenClaw对接Qwen3-4B实战:5步完成本地模型调用与自动化任务

OpenClaw对接Qwen3-4B实战&#xff1a;5步完成本地模型调用与自动化任务 1. 为什么选择OpenClawQwen3-4B组合 去年冬天第一次听说OpenClaw时&#xff0c;我正被重复性的文件整理工作折磨得焦头烂额。作为一个习惯用脚本解决问题的开发者&#xff0c;我试过各种自动化工具&…...

模拟前端电路设计:高精度信号处理核心技术解析

1. 模拟前端电路设计概述 模拟前端电路是连接真实世界与数字系统的关键桥梁&#xff0c;它负责将传感器采集的微弱模拟信号进行调理、放大和转换&#xff0c;使其能够被后续的数字系统正确处理。作为一名从事硬件设计十余年的工程师&#xff0c;我处理过从医疗设备到工业控制的…...

抑制素A抗体如何提升妊娠中期唐氏综合征筛查的效能?

一、为何抑制素A成为妊娠期的重要生物标志物&#xff1f;抑制素A是一种由α和βA亚基通过二硫键连接形成的异源二聚体糖蛋白。在非妊娠期&#xff0c;它主要由卵巢颗粒细胞分泌&#xff0c;作为反馈调节因子&#xff0c;选择性地抑制垂体前叶分泌卵泡刺激素。进入妊娠状态后&am…...

基于MATLAB的用于分析弧齿锥齿轮啮合轨迹的程序已调通,可直接运行并输出齿轮啮合轨迹及传递误差

158.基于matlab的用于分析弧齿锥齿轮啮合轨迹的输出齿轮啮合轨迹及传递误差程序已调通&#xff0c;可直接运行 1. 程序概述 本程序包实现了一套完整的弧齿锥齿轮齿面接触分析&#xff08;TCA&#xff09; 系统&#xff0c;主要用于分析大轮凸面与小轮凹面的啮合特性。程序由刘…...

102. 在控制平面主机名更改后恢复 Rancher 配置的 RKE2 集群

Environment 环境 Rancher provisioned RKE2 downstream cluster control plane node hostname changed, without removing the node from the cluster. Rancher 配置了 RKE2 下游集群控制平面节点的主机名更改&#xff0c;但未将该节点从集群中移除。 Procedure 程序It is …...

3大核心优势!猫抓视频捕获工具让流媒体解析效率提升100%

3大核心优势&#xff01;猫抓视频捕获工具让流媒体解析效率提升100% 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 猫抓浏览器扩展是一款专业的网…...