React@16.x(62)Redux@4.x(11)- 中间件2 - redux-thunk

目录

  • 1,介绍
    • 举例
  • 2,原理和实现
    • 实现
  • 3,注意点

1,介绍

一般情况下,action 是一个平面对象,并会通过纯函数来创建。

export const createAddUserAction = (user) => ({type: ADD_USER,payload: user,
});

这样是有一些限制的

  • 无法使用异步的,比如在请求接口之后再做一些操作。
  • 或根据条件,同时 dispatch 多个 action

redex-thunk 中间件的作用:允许 action 是一个函数,而不是一个平面对象。

举例

React@4.x 版本使用 redux-thunk@2.4.2 版本。

export const createAddUserAction = (user) => ({type: ADD_USER,payload: user,
});export const createSetLoadingAction = (isLoading) => ({type: SET_LOADING,payload: isLoading,
});export const fetchUsers = () => {return async (dispatch) => {dispatch(createSetLoadingAction(true))const res = await getAllUsers();dispatch(createAddUserAction(res))dispatch(createSetLoadingAction(false))}
}
// 使用
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { fetchUsers } from "./action/userAction";const store = createStore(reducer, applyMiddleware(thunk));
store.dispatch(fetchUsers())

这个函数有3个参数:

  1. dispatch,就是 store.dispatch
  2. getState,就是 store.getState
  3. extra,设置的额外的参数。

2,原理和实现

整体流程:

在这里插入图片描述

实现

中间件的写法参考 这篇文章

function thunkMiddleware(extra) {return (store) => (next) => (action) => {if (typeof action === "function") {return action(store.dispatch, store.getState, extra);}return next(action);};
}const thunk = thunkMiddleware({});
thunk.withExtraArgument = thunkMiddleware;
export default thunk;

3,注意点

因为 redux-thunk 会修改 action 的类型,所以书写顺序通常会作为第一个。


以上。

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

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

相关文章

WEB前端07-DOM对象

DOM模型 1.DOM概念 文档对象模型属于BOM的一 部分,用于对BOM中的核心对象document进行操作,它是一种与平台、语言无关的接口,允许程序和脚本动态地访问或更新HTML、XML文档的内容、结构和样式,且提供了一系列的函数和对象来实现…

工作边界感

工作边界 **明确工作边界****尊重他人的工作边界**:**建立有效的沟通机制**:**制定明确的规则和流程**:**保持开放和包容的心态**:**寻求专业支持**: 在程序员的日常工作中,会遇到很多边界问题。如果这些边…

【人工智能大模型】文心一言介绍以及基本使用指令

目录 一、产品背景与技术基础 二、主要功能与特点 基本用法 指令的使用 注意事项 文心一言(ERNIE Bot)是百度基于其文心大模型技术推出的生成式AI产品。以下是对文心一言的详细介绍: 一、产品背景与技术基础 技术背景:百度…

NOMAD: Non-Exclusive Memory Tiering via Transactional Page Migration——论文泛读

OSDI 2024 Paper CXL论文阅读笔记整理 问题 随着可字节寻址存储设备的出现,如CXL内存、持久内存和存储类内存,分层存储系统已成为现实,不同层具有不同的特性,如速度、大小、功耗和成本。分层内存管理的核心是操作系统&#xff0…

vmware虚拟机中,Centos安装Docker,解决国内无法访问

背景 本文主要解决了centos 的yum源 无法更新 和 docker的 源 国内无法访问的问题。 本文环境:windows宿主机装了vmware虚拟机,虚拟机中安装了Centos,centos内装docker。其实可以直接在window装docker desktop for windows,但…

VS C#类文件自动生成头部注释

VS C#类文件自动生成头部注释(以VS2019为例) 1、更新位置 E:\VS2019\vs_2019\Common7\IDE\ItemTemplates\CSharp\Code\2052\Class 2、替换Class 原始文件 using System; using System.Collections.Generic; $if$ ($targetframeworkversion$ > 3.5…

【代码随想录】【算法训练营】【第58天 3】 [卡码103]水流问题 [卡码104]建造最大岛屿

前言 思路及算法思维,指路 代码随想录。 题目来自 卡码网。 day 58,周四,ding~ 题目详情 [卡码103] 水流问题 题目描述 卡码103 水流问题 LeetCode类似题目417 太平洋大西洋水流问题 解题思路 前提: 思路: 重…

Qt 制作安装包

记录使用Qt工具制作一个安装包的过程 目录 1.准备工作 1.1检查Qt Installer Frameworks是否安装 1.2.安装Qt Installer Frameworks 1.3准备release出来的exe dll等文件 2.创建打包工程所需要的文件及目录 2.1创建子目录 2.2 创建工程文件 2.3 创建config/config.xml …

创建鸿蒙手机模拟器(HarmonyOS Emulator)

文 | Promise Sun 一.前提条件: 鸿蒙项目开发需要使用模拟器进行开发测试,但目前想在DevEco Studio开发工具中使用模拟器就必须到华为官网进行报名申请,参加“鸿蒙模拟器(HarmonyOS Emulator)Beta活动申请”。 申请审…

计算机课设——基于Java web的超市管理系统

smbms_java_web 基于Java web的超市管理系统,数据库课程设计 1.引言 是一个基于Java Web连接MySQL的小项目。 超市管理系统(smbms)作为每个计算机专业的大学生都是一个很好的练手项目,逻辑层次分明,基础功能包括用户的登录和注销&#xff…

【日常记录】【插件】excel.js导出的时候给单元格设置下拉选择、数据校验等

文章目录 1. 代码基本结构2. 导出的excel 某单元格的值设置为下拉选择3. 如何把下拉选择项设置为动态4. 单元格设置校验、提示5. 在WPS上的设置 1. 代码基本结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><…

韦东山嵌入式linux系列-驱动进化之路:设备树的引入及简明教程

1 设备树的引入与作用 以 LED 驱动为例&#xff0c;如果你要更换LED所用的GPIO引脚&#xff0c;需要修改驱动程序源码、重新编译驱动、重新加载驱动。 在内核中&#xff0c;使用同一个芯片的板子&#xff0c;它们所用的外设资源不一样&#xff0c;比如A板用 GPIO A&#xff0c…

基于python的京东VR眼镜口碑情感分析,包括lda和情感分析

第1章 绪论 1.1选题背景 在当今科技发展迅速的时代&#xff0c;虚拟现实&#xff08;VR&#xff09;技术作为一种前沿的数字体验方式受到越来越多人的关注。京东作为中国领先的电商平台&#xff0c;推出的VR眼镜备受消费者关注。通过对京东VR眼镜口碑进行情感分析&#xff0c…

Pycharm 报错 Environment location directory is not empty 解

删除项目中ven文件夹&#xff08;已存在的&#xff09;&#xff0c;然后再添加新的ven虚拟环境就可以了

如何用手机压缩视频?手机压缩视频方法来了

高清视频的大文件大小常常成为分享和存储的障碍&#xff0c;尤其是在数据流量有限或存储空间紧张的情况下。幸运的是&#xff0c;无论是智能手机还是个人电脑&#xff0c;都有多种方法可以帮助我们轻松压缩视频文件&#xff0c;以适应不同的需求和情境。本文将介绍如何在手机上…

格式工厂转换视频分辨率

1、下载和安装 http://www.pcfreetime.com/formatfactory/CN/index.html 2、打开视频 3、设置分辨率等参数 也可以选择保持原分辨率 4、执行导出 5、打开输出所在位置

前端开发之盒子模型

目录 盒子分类 display属性 盒子内部结构特征 padding填充区 border边框区 margin外边距 盒子width和height边界 盒子分类 块级盒子&#xff08;又叫块级元素、块级标签&#xff09; 特征&#xff1a;独占一行&#xff0c;对宽度高度支持 如&#xff1a;p div ul li h1…

完整且详细的Yolov8复现+训练自己的数据集

Yolov8 的源代码下载&#xff1a;ultralytics/ultralytics: NEW - YOLOv8 &#x1f680; in PyTorch > ONNX > CoreML > TFLite (github.com)https://github.com/ultralytics/ultralytics Yolov8的权重下载&#xff1a;Releases ultralytics/assets GitHubUltralyt…

Java 反射机制:概念、用途与示例

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…

Spring纯注解开发

前言 Spring3.0引入了纯注解开发的模式&#xff0c;框架的诞生是为了简化开发&#xff0c;那注解开发就是简化再简化。Spring的特性在整合MyBatis方面体现的淋漓尽致哦 一.注解开发 以前跟老韩学习SE时他就说&#xff1a;注解本质是一个继承了Annotation 的特殊接口,其具体实…