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产品。以下是对文心一言的详细介绍: 一、产品背景与技术基础 技术背景:百度…

基于Gunicorn、Flask和Docker的高并发部署

1. 引言 你好,我是悦创。 随着互联网应用的不断发展,如何高效地处理高并发请求成为了每个开发者需要解决的关键问题。本文将详细介绍如何使用 Gunicorn、Flask 和 Docker 来实现一个高并发部署模型,确保应用在高并发情况下依然能够高效稳定…

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,但…

技术选型_001_应用场景及编程语言

文章目录 Web开发桌面应用数据分析 不同编程语言有不同的适用场景及生态,这里仅记录作为个人开发者接触过的场景,不考虑企业侧因素,完全从开发效率及性能,包大小等因素考虑,因目前个人只接触过应用层开发,后…

uniapp 获取自定义组件的高度

在 UniApp 中&#xff0c;要获取自定义组件的高度&#xff0c;可以使用uni.createSelectorQuery()方法结合res.node和res.height来实现。 首先&#xff0c;在父组件的代码中&#xff0c;给自定义组件添加一个 ref 属性&#xff0c;例如&#xff1a; <template><view…

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

VS C#类文件自动生成头部注释&#xff08;以VS2019为例&#xff09; 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]建造最大岛屿

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

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 …

数据结构第35节 性能优化 算法的选择

算法的选择对于优化程序性能至关重要。不同的算法在时间复杂度、空间复杂度以及适用场景上有着明显的差异。下面我将结合具体的代码示例&#xff0c;来讲解几种常见的算法选择及其优化方法。 示例 1: 排序算法 场景描述: 假设我们需要对一个整数数组进行排序。 算法选择: …

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

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

好用的Ubuntu下的工具合集[持续增加]

1. 终端工具 UBUNTU下有哪些好用的终端软件? - 知乎 (zhihu.com) sudo apt install terminator

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

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

SpringBoot集成EasyExcel实现模板写入多个sheet导出

EasyExcel使用模板导出多个sheet 开发环境 开发环境 SpringBoot2.6EasyExcel3.2.1 //第一种输出到指定目录 public static void main(String[] args) throws FileNotFoundException {InputStream inputStream new FileInputStream(new File("模板位置"));InputStre…

ES6 模块

ES6 模块学习记录 ES6&#xff08;ECMAScript 2015&#xff09;模块是JavaScript官方的标准模块系统。它允许开发者以模块化的方式编写代码&#xff0c;模块可以在不同的文件之间进行组织和重用。 基本特征 默认导出&#xff08;Default Exports&#xff09;&#xff1a;每个…

PHP MySQL 读取数据

PHP MySQL 读取数据 PHP和MySQL是Web开发中的经典组合&#xff0c;广泛用于创建动态网站和应用程序。在PHP中读取MySQL数据库中的数据是一项基本技能&#xff0c;涉及到连接数据库、执行查询以及处理结果集。本文将详细介绍如何使用PHP从MySQL数据库中读取数据。 1. 环境准备…