当前位置: 首页 > 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…...

Pixel Epic · Wisdom Terminal参数详解:显存配额与智力同步率调优指南

Pixel Epic Wisdom Terminal参数详解&#xff1a;显存配额与智力同步率调优指南 1. 认识像素史诗 智识终端 像素史诗 (Pixel Epic) 是一款基于 AgentCPM-Report 大模型构建的高端研究报告辅助终端。它将枯燥的科研过程转化为一场充满像素美学的RPG冒险&#xff0c;让用户以…...

硅橡胶资源平台对接的靠谱对接企业哪家强

在深圳这座创新与制造之都&#xff0c;硅橡胶产业上下游企业林立&#xff0c;从原材料、模具设计到制品生产&#xff0c;形成了一个庞大而复杂的产业链。对于许多企业而言&#xff0c;“深圳硅橡胶资源平台对接” 的需求日益迫切——无论是寻找稳定供应商、开拓新客户&#xff…...

如何轻松获取网页媒体资源?猫抓开源工具让资源提取效率提升3倍

如何轻松获取网页媒体资源&#xff1f;猫抓开源工具让资源提取效率提升3倍 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 你是否曾在浏览网页时遇…...

[Python3高阶编程] - [Python3高阶编程] - 异步编程深度学习指南三:手动实现AsyncRLock

一、手动实现 AsyncRLockimport asyncio from typing import Optionalclass AsyncRLock:def __init__(self):self._lock asyncio.Lock() # 底层互斥锁self._owner: Optional[asyncio.Task] None # 当前持有锁的协程&#xff08;Task&#xff09;self._count 0 …...

Windows平台OpenClaw部署:百川2-13B-4bits量化版调用详解

Windows平台OpenClaw部署&#xff1a;百川2-13B-4bits量化版调用详解 1. 为什么选择这个组合&#xff1f; 去年冬天&#xff0c;当我第一次尝试在Windows笔记本上部署本地AI助手时&#xff0c;遇到了显存不足的难题。我的GTX 3060显卡根本无法承载常规的13B模型&#xff0c;直…...

如何解决Tokio项目中Windows平台TCP性能问题的完整指南

如何解决Tokio项目中Windows平台TCP性能问题的完整指南 【免费下载链接】tokio A runtime for writing reliable asynchronous applications with Rust. Provides I/O, networking, scheduling, timers, ... 项目地址: https://gitcode.com/GitHub_Trending/to/tokio To…...

拯救者笔记本性能优化终极指南:如何用Lenovo Legion Toolkit释放硬件潜力

拯救者笔记本性能优化终极指南&#xff1a;如何用Lenovo Legion Toolkit释放硬件潜力 【免费下载链接】LenovoLegionToolkit Lightweight Lenovo Vantage and Hotkeys replacement for Lenovo Legion laptops. 项目地址: https://gitcode.com/gh_mirrors/le/LenovoLegionTool…...

如何在Charmbracelet Log中实现结构化日志记录的5个技巧

如何在Charmbracelet Log中实现结构化日志记录的5个技巧 【免费下载链接】log A minimal, colorful Go logging library &#x1fab5; 项目地址: https://gitcode.com/gh_mirrors/log1/log Charmbracelet Log是一款轻量级且色彩丰富的Go日志库&#xff0c;支持结构化日…...

VOOHU沃虎:从SFP到SFP28不同光模块如何选笼子?

在高速通信设备的设计中&#xff0c;SFP光模块笼子是一个看似简单却至关重要的组件。随着数据传输速率从1G演进到10G、25G乃至更高&#xff0c;光模块对笼子的要求也在发生质的变化。SFP&#xff08;1G&#xff09;、SFP&#xff08;10G&#xff09;、SFP28&#xff08;25G&…...

快速部署Python3.10环境:Miniconda镜像实战教学

快速部署Python3.10环境&#xff1a;Miniconda镜像实战教学 1. 为什么选择Miniconda搭建Python环境&#xff1f; 在Python开发中&#xff0c;最让人头疼的问题之一就是环境管理。不同项目可能需要不同版本的Python和依赖库&#xff0c;直接安装会导致版本冲突。Miniconda提供…...