react18中redux-promise搭配redux-thunk完美简化异步数据操作

用过redux-thunk的应该知道,操作相对繁琐一点,dispatch本只可以出发plain objectredux-thunkdispatch可以返回一个函数。而redux-promise在此基础上大大简化了操作。

实现效果

请添加图片描述

关键逻辑代码

  • store/index.js
import { createStore, applyMiddleware } from "redux";
import { combineReducers } from "redux-immutable";
import { thunk } from "redux-thunk";
import { createLogger } from "redux-logger";
import reduxPromise from "redux-promise";
import reducer from "./reducer";const middleware = [thunk, reduxPromise];
const env = process.env.NODE_ENV;
if (env === "development") {middleware.push(createLogger({ collapsed: true }));
}const store = createStore(reducer, applyMiddleware(...middleware));export default store;
  • reucer.js
import { fromJS } from "immutable";
import { delay } from "../../utils";
const initstate = fromJS({list: [],count: 100,
});function storeReducers(state = initstate, action) {console.log("🚀 ~ storeReducers ~ action:", action);switch (action.type) {case "ADD":return state.updateIn(["count"], (n) => n + action.value);case "MINUS":return state.updateIn(["count"], (n) => n - action.value);default:return state;}
}export async function handleAdd() {await delay(2000);const data = await Promise.resolve(20);return { type: "ADD", value: data };
}export async function handleMinus() {await delay(2000);const data = await Promise.resolve(20);return { type: "MINUS", value: data };
}export default storeReducers;

可以发现在handleAdd里面写异步业务获取返回数据是可以正常执行的,功能完好。

当我们注释掉redux-promise中间件的配置好后,页面会立马报错。

import { createStore, applyMiddleware } from "redux";
import { combineReducers } from "redux-immutable";
import { thunk } from "redux-thunk";
import { createLogger } from "redux-logger";
// import reduxPromise from "redux-promise";
import reducer from "./reducer";// const middleware = [thunk, reduxPromise];
const middleware = [thunk];
const env = process.env.NODE_ENV;
if (env === "development") {middleware.push(createLogger({ collapsed: true }));
}const store = createStore(reducer, applyMiddleware(...middleware));
export default store;

在这里插入图片描述

  • 组件代码
import { Button, Dialog, setDefaultConfig, Space, Toast } from "antd-mobile";
import { http } from "../api/request";
import { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { handleAdd, handleMinus } from "../store/reducer/store";
function Home() {const count = useSelector((state) => state.getIn(["store", "count"]));const dispatch = useDispatch();function handleAddCount() {dispatch(handleAdd());}function handleMinusCount() {dispatch(handleMinus());}return (<div className="home-box"><h2>home</h2><p>{count}</p><Space><Button color="primary" onClick={handleAddCount}>add</Button><Button color="danger" onClick={handleMinusCount}>minus</Button></Space></div>);
}
export default Home;

参考资料

  • https://github.com/redux-utilities/redux-promise

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

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

相关文章

汇编语言与接口技术--算术运算程序设计

一、 实验要求 编程实现两个数&#xff1a;#998877H 和 #778899H 的加法运算。编程实现两个数&#xff1a;#998877H 和 #778899H 的减法运算。 二、 实验设计 1.整体思路 无符号角度&#xff1a; &#xff08;1&#xff09;加法 1.初始化&#xff1a;设置两个数 998877H 和…

(蓝桥杯C/C++)——基础算法(上)

目录 一、二分法 1.二分法简介 二分法简介-解题步骤 2.整数二分-简介 整数二分-模板 3.浮点二分-简介 浮点二分-模板 4.二分答案-简介 二分答案-模板​​​​​​​ 二、位运算 1.位运算简介 2.常见的位运算 按位与AND(&) 按位或OR( | ) 按位异或…

1-petalinux 问题记录-根文件系统分区问题

在MPSOC上使用SD第二分区配置根文件系统的时候&#xff0c;需要选择对应的bootargs&#xff0c;但是板子上有emmc和sd两个区域&#xff0c;至于配置哪一种mmcblk0就出现了问题&#xff0c;从vivado中的BlockDesign和MLK XCZU2CG原理图来看的话&#xff0c;我使用的SD卡应该属于…

CSS中的背景色和前景色

目录 1 对比度的计算1.1 亮度计算1.2 对比度比率 2 在线计算对比度 在我们的样式设计中&#xff0c;通常会有背景色和前景色的概念。前景色我们通常用来设置文本的颜色&#xff0c;而背景色通常是文本的所在容器的颜色。比如如果我们把文本放在普通容器里&#xff0c;那普通容器…

全面解析:区块链技术及其应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 全面解析&#xff1a;区块链技术及其应用 全面解析&#xff1a;区块链技术及其应用 全面解析&#xff1a;区块链技术及其应用 区…

[Redis] Redis主从复制模式

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…

初始JavaEE篇——多线程(8):JUC的组件

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 目录 Callable接口 ReentrantLock synchronized 与 ReentrantLock的区别 信号量&#xff08;Semaphore&#xff09; CountDown…

Java实现JWT登录认证

文章目录 什么是JWT?为什么需要令牌?如何实现?添加依赖&#xff1a;JwtUtils.java&#xff08;生成、解析Token的工具类&#xff09;jwt配置&#xff1a;登录业务逻辑&#xff1a;其他关联代码&#xff1a;测试&#xff1a; 什么是JWT? JWT&#xff08;Json Web Token&…

Meta AR 眼镜团队前负责人加入 OpenAI;visionOS 2.2 Beta 引入超宽屏投屏模式丨 RTE 开发者日报

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09;领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的数据」、「有思考的 文章 …

如何对LabVIEW软件进行性能评估?

对LabVIEW软件进行性能评估&#xff0c;可以从以下几个方面着手&#xff0c;通过定量与定性分析&#xff0c;全面了解软件在实际应用中的表现。这些评估方法适用于确保LabVIEW程序的运行效率、稳定性和可维护性。 一、响应时间和执行效率 时间戳测量&#xff1a;使用LabVIEW的时…

鸢尾博客项目开源

1.博客介绍 鸢尾博客是一个基于Spring BootVue3 TypeScript ViteJavaFx的客户端和服务器端的博客系统。项目采用前端与后端分离&#xff0c;支持移动端自适应&#xff0c;配有完备的前台和后台管理功能。后端使用Sa-Token进行权限管理,支持动态菜单权限&#xff0c;服务健康…

拾光云影 3.3.0 | 高清秒播电视直播,支持IPV4,几千频道

拾光云影是一款Ipv4通用版电视直播APP&#xff0c;界面熟悉但有所改进&#xff0c;操作布局类似TVbox。新增了功能按钮页&#xff0c;提供更多功能。频道清晰&#xff0c;加载速度快&#xff0c;支持港澳台等特殊频道&#xff0c;大部分频道均可秒播。软件内置了直播接口&#…

【HTML】——VSCode 基本使用入门和常见操作

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 零&#xff1a;HTML开发工具VSCode的使用 1&#xff1a;创建项目 2&#xff1a;创建格式模板&#x…

Redis数据库测试和缓存穿透、雪崩、击穿

Redis数据库测试实验 实验要求 1.新建一张user表&#xff0c;在表内插入10000条数据。 2.①通过jdbc查询这10000条数据&#xff0c;记录查询时间。 ②通过redis查询这10000条数据&#xff0c;记录查询时间。 3.①再次查询这一万条数据&#xff0c;要求根据年龄进行排序&#…

zabbix 7.0 安装(服务器、前端、代理等)

https://www.zabbix.com/download 使用上面的地址&#xff0c;按教程执行命令安装

andrular输入框input监听值传递

效果图&#xff1a; step1: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.html <button mat-button (click)“openDialog()”>Open dialog step2: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.ts import {Component, inject}…

考公人数攀升?地信、测绘、地质、遥感等专业,能报考哪些单位

近年来&#xff0c;考公人数持续飙升&#xff0c;国考报名人数更逐年攀升。2025年国家公务员考试共有341.6万人通过资格审查&#xff0c;报录比达86:1。国考报名人数再创新高。 国家公务员考试时间安排 地理学相关岗位分析 地信属于地理科学类&#xff0c;测绘类中不包括地信&…

Pr 视频效果:超级键

视频效果/键控/超级键 Keying/Ultra Key 超级键 Ultra Key效果是 Premiere Pro 中功能强大的抠像工具&#xff0c;主要用于绿幕/蓝幕抠像。通过选择要抠除的颜色&#xff08;通常是绿幕或蓝幕的颜色&#xff09;&#xff0c;即可以将该颜色的像素设为透明&#xff0c;实现主体与…

24-11-1-读书笔记(三十一)-《契诃夫文集》(五)下([俄] 契诃夫 [译] 汝龙)生活乏味但不乏魅力。

文章目录 《契诃夫文集》&#xff08;五&#xff09;下&#xff08;[俄] 契诃夫 [译] 汝龙&#xff09;生活乏味但不乏魅力。目录阅读笔记总结 《契诃夫文集》&#xff08;五&#xff09;下&#xff08;[俄] 契诃夫 [译] 汝龙&#xff09;生活乏味但不乏魅力。 休息&#xff0c…

戴尔电脑 Bios 如何进入?Dell Bios 进入 Bios 快捷键是什么?

BIOS&#xff08;基本输入输出系统&#xff09;是计算机启动时运行的第一个程序&#xff0c;它负责初始化硬件并加载操作系统。对于戴尔电脑用户来说&#xff0c;有时可能需要进入 BIOS 进行一些特定的设置调整&#xff0c;比如更改启动顺序、调整性能选项或解决硬件兼容性问题…