react18中react-thunk实现公共数据仓库的异步操作

reduxreact-redux都只能实现数据的同步修改更新,有点类似于vue中的mutation,只能做同步操作,异步的话不用actions来实现。由于在项目始终不可避免要实现的异步数据的更新,这明显不够用了。是时候引入我们的异步中间件redux-thunk

实现效果

请添加图片描述

代码实现

  • 安装redux-thunk
npm i redux-thunk
  • store/index.js
import { createStore, applyMiddleware, compose } from "redux";
import { combineReducers } from "redux-immutable";
import { thunk } from "redux-thunk";import { CounterReducer } from "./CounterReducer";const reducers = combineReducers({count: CounterReducer,
});
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;const store = createStore(reducers, composeEnhancers(applyMiddleware(thunk)));export default store;
  • CounterReducer.js
    封装了两个异步方法,模拟数据的异步获取,然后导出供其他组件使用
import { fromJS } from "immutable";
const initialState = fromJS({counter: 0,userInfo: {name: "John Doe",age: 25,},
});
function CounterReducer(state = initialState, action) {console.log("🚀 ~ CounterReducer ~ action:", action);switch (action.type) {case "ADD":return state.update("counter", (val) => {return val + 1;});case "ADD_TWO":return state.update("counter", (val) => {return val + 2;});case "DEC":return state.update("counter", (val) => val - 1);case "DEC_TWO":return state.update("counter", (val) => val - 2);case "CHANGE_NAME":return state.setIn(["userInfo", "name"], action.payload);default:return state;}
}// async action 2s later
function handleDelayAdd() {return (dispatch) => {// 模拟异步接口setTimeout(() => dispatch({ type: "ADD_TWO" }), 2000);};
}// async action 2s later
function handleDelayReduce() {return (dispatch) => {// 模拟异步接口setTimeout(() => dispatch({ type: "DEC_TWO" }), 2000);};
}export { CounterReducer, handleDelayAdd, handleDelayReduce };
  • DemoB.js
    引入两个异步的方法,注意跟同步的dispatch使用方法有点区别,dispatch(handleDelayAdd())dispatch直接调用了该方法
import { useSelector, useDispatch } from "react-redux";
import { Button, Space, Divider } from "antd";
import { handleDelayAdd, handleDelayReduce } from "../../store/CounterReducer";
function DemoB() {const count = useSelector((state) => state.getIn(["count", "counter"]));const userInfo = useSelector((state) => state.getIn(["count", "userInfo"]));const dispatch = useDispatch();return (<div><p>Demo B</p><div><Space split={<Divider />}><span>name: {userInfo.get("name")}</span><span>age: {userInfo.get("age")}</span><span>count:{count}</span></Space></div><Space><Button type="primary" onClick={() => dispatch({ type: "ADD" })}>add count</Button><Button type="primary" danger onClick={() => dispatch({ type: "DEC" })}>minus count</Button><Button type="primary" onClick={() => dispatch(handleDelayAdd())}>delay 2s add count</Button><Buttontype="primary"dangeronClick={() => dispatch(handleDelayReduce())}>delay 2s minus count</Button><Buttontype="dashed"dangeronClick={() => dispatch({ type: "CHANGE_NAME", payload: "张学友" })}>change name</Button></Space></div>);
}
export default DemoB;

这样我们就实现了在react项目中数据的异步更新。整体还是比较简单的。

总结

在这个具有副作用的action中,我们可以看出,函数内部可能极为复杂。如果需要为每一个异步操作都如此定义一个action,显然action不易维护。

action不易维护的原因:

  • action的形式不统一
  • 就是异步操作太为分散,分散在了各个action中

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

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

相关文章

长思维PRM

思维链 除了常见的连接词如 “and” 和 “so” 之外。还出现了"wait", Alternatively" 等特殊的关键词&#xff0c;"像 “wait” (表示反思)和 “Alternatively”(表示探索不同路径) 这样的关键词是模型能够进行反思和自我纠正的重要指标 迭代式问题解决&…

【PLC编程】GX Works报未能正常执行RUN中写入解决办法

在PLC编程中按F4转换时报未正常执行RUN中写入&#xff0c;可能是程序不一致。 选择工具->选项 选择RUN中写入。去除转换&#xff08;编译&#xff09;中执行RUN中写入 点击确定后&#xff0c;就不会再报此问题。F4转换也能正常转换了。

Java Lock CountDownLatch 总结

前言 相关系列 《Java & Lock & 目录》&#xff08;持续更新&#xff09;《Java & Lock & CountDownLatch & 源码》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;《Java & Lock & CountDownLatch & 总结》&#xff08;学习总…

IE快捷方式加载特定主页

一、某插件安装后&#xff0c;桌面会增加一个首页为特定网站的IE快捷方式&#xff08;不对原有的IE做任何改动&#xff09;&#xff0c;同时&#xff0c;会把快速启动栏中的IE快捷方式改为特定网站。 解决方案如下&#xff1a; 方法一&#xff1a;直接把桌面新增加的IE快捷方式…

Selenium4自动化测试常用函数总结,各种场景操作实战

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 seleninum作为自动化测试的工具&#xff0c;自然是提供了很多自动化操作的函数&#xff0c;下面列举下比较常用的函数&#xff0c;更多可见官方文档&#xff1a;…

网络安全的重要性及实践指南

网络安全的重要性及实践指南 前言 随着信息技术的快速发展&#xff0c;网络安全问题日益突出。无论是个人用户还是企业组织&#xff0c;网络安全都成为了必须重视的问题。本文将深入探讨网络安全的重要性、常见威胁、以及如何有效地保护网络安全。 一、网络安全的重要性 1.…

通过SSL加密服务器流量

要实现通过SSL对客户端和服务器之间的流量进行加密&#xff0c;我们可以选择Stunnel这个开源软件&#xff0c;这个软件实现了客户端和服务器端之间的流量通过TLS进行加密传输。 例如我们现在有一台服务器&#xff0c;在其上安装了代理服务&#xff0c;我们想对连接这个代理服务…

docker常用命令整理

文章目录 docker 常用操作命令一、镜像类操作1.构建镜像2.从容器创建镜像3.查看镜像列表4.删除镜像5. 从远程镜像仓库拉取镜像6. 将镜像推送到镜像仓库中7. 将镜像导出8. 导入镜像9. 登录镜像仓库 二、容器相关操作1. 运行容器2. 进入容器3. 查看容器的运行状态4. 查看容器的日…

QT SSDP 局域网检测支持扫描通信

一. 什么是SSDP? 简单服务发现协议(SSDP,Simple Service Discovery Protocol)是一种应用层协议,简单服务发现协议是在HTTPU和HTTPMU的基础上实现的协议。简单服务发现协议(SSDP)提供了在局域网里面发现设备的机制。客户端可以通过使用SSDP,根据自己的需要,在局域网查找特…

C++20新特性探索:概念(Concepts)与范围库(Ranges)

随着C++标准的不断演进,每一次新版本的发布都带来了诸多令人瞩目的新特性。C++20,作为近年来的一次重大更新,不仅巩固了C++在高性能计算、系统编程等领域的地位,还通过引入一系列创新特性,进一步提升了C++的可用性和表达力。本文将深入探讨C++20中的两大亮点——概念(Con…

丝氨酸/苏氨酸激酶(STKs):前列腺癌治疗的新兴靶点

引言 前列腺癌&#xff08;PCa&#xff09;是男性癌症相关死亡的第五大原因&#xff0c;全球约有140万患者&#xff0c;2020年超37.5万死亡病例。 靶向治疗是潜力巨大的领域&#xff0c;PARP、PSMA、STEAP1、DLL3等是前列腺癌治疗的明星靶点。 除此之外&#xff0c;还有哪些…

深度学习之降维和聚类

1 降维和聚类 1.1 图解为什么会产生维数灾难 ​ 假如数据集包含10张照片&#xff0c;照片中包含三角形和圆两种形状。现在来设计一个分类器进行训练&#xff0c;让这个分类器对其他的照片进行正确分类&#xff08;假设三角形和圆的总数是无限大&#xff09;&#xff0c;简单的…

SMT(表面贴装技术)

一、什么是SMT SMT&#xff0c;即表面贴装技术&#xff08;Surface Mounted Technology&#xff09;&#xff0c;是一种将元器件直接安装到印刷电路板&#xff08;PCB&#xff09;表面的制造方法。这种技术极大地提高了电子产品的密度和性能&#xff0c;是现代电子制造中的关键…

基于逻辑回归进行THUCNews文本分类

项目背景 基于逻辑回归(Logistic Regression)进行THUCNews文本分类的项目背景通常包括以下几个方面: 1. 数据集背景 THUCNews数据集:THUCNews(Tsinghua News Corpus)是由清华大学自然语言处理与社会人文计算实验室整理的新闻文本数据集。该数据集包含约84万篇新闻文档,…

Linux常用命令 yum 命令介绍

目录 yum 语法 yum常用命令 常见命令举例 1. 列出所有可更新的软件清单命令&#xff1a;yum check-update 2. 更新所有软件命令&#xff1a;yum update 3. 仅安装指定的软件命令&#xff1a;yum install 4. 仅更新指定的软件命令&#xff1a;yum update 5. 列出所有可…

安装pygod

了解pygod。 It is recommended to use pip for installation. Please make sure the latest version is installed, as PyGOD is updated frequently: pip install pygod # normal install pip install --upgrade pygod # or update if needed如果pip不是最新的&…

国外白帽故事 | 通过OSINT入侵了1000多辆特斯拉

我撰写这篇文章的目的是为了提高特斯拉车主的安全意识&#xff0c;值得注意的是&#xff0c;这并不是特斯拉车辆或其基础设施的漏洞。 在这篇文章中&#xff0c;我将分享我是如何通过OSINT技术入侵特斯拉汽车的&#xff0c;以及我向特斯拉报告后得到的回应&#xff0c;最后我也…

力扣249题详解:移位字符串分组的多种解法与模拟面试

在本篇文章中&#xff0c;我们将详细解读力扣第249题“移位字符串分组”。通过学习本篇文章&#xff0c;读者将掌握如何将一组字符串按照移位相同的特性进行分组&#xff0c;并了解相关的复杂度分析和模拟面试问答。每种方法都将配以详细的解释&#xff0c;以便于理解。 问题描…

[NewStar 2024] week4

Crypto 欧拉欧拉 这题给了很诡异的素数生成方式。p和q异或后基本是一串1&#xff0c;这个差是-3 flag bflag{*********} m bytes_to_long(flag)def get_prime(bits):while True:p getPrime(bits)x (1 << bits) - 1 ^ pfor i in range(-10, 11):if isPrime(x i):r…

logdata-anomaly-miner:一款安全日志解析与异常检测工具

关于logdata-anomaly-miner logdata-anomaly-miner是一款安全日志解析与异常检测工具&#xff0c;该工具旨在以有限的资源和尽可能低的权限运行分析&#xff0c;以使其适合生产服务器使用。 为了确保 logdata-anomaly-miner的正常运行&#xff0c;推荐安装了python > 3.6的…