当前位置: 首页 > news >正文

react 09之状态管理工具1 redux+ react-thunk的使用实现跨组件状态管理与异步操作

目录

  • react 09之状态管理工具1 redux+ react-thunk的使用实现跨组件状态管理与异步操作
    • store / index.js store的入口文件
    • index.js 在项目入口文件 引入
    • store / actionType.js 定义action的唯一标识
    • store / reducers / index.js
    • store / actions / form.js
    • store / reducers / form.js
    • store / actions / list.js
    • store / reducers / list.js
    • 使用 App类.jsx
    • ASon.jsx
    • 效果

react 09之状态管理工具1 redux+ react-thunk的使用实现跨组件状态管理与异步操作

  • npm install redux react-redux

  • npm i redux-thunk

  • redux-thunk

    • redux-thunk是一个Redux的中间件,它允许你在Redux中编写异步的action creators。

store / index.js store的入口文件

import { applyMiddleware, legacy_createStore } from 'redux';
// 引入redux-thunk,用于支持异步action
import reduxThunk from 'redux-thunk';
// 引入汇总后的reducer
import reducers from './reducers';const store = legacy_createStore(reducers, applyMiddleware(reduxThunk))
export default store;

index.js 在项目入口文件 引入

import App from "./7redux/2使用thunk/App类";
import store from "./store/index.js";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}><App /></Provider>
);

store / actionType.js 定义action的唯一标识

// 常量 唯一标识 标记当前action的唯一性
export const FORM_ADD_COUNT = 'form_addCount'
export const FORM_SUB_COUNT = 'form_subCount'
export const LIST_ADD_LIST = 'list_addList'

store / reducers / index.js

/*该文件用于汇总所有的reducer为一个总的reducer
*/
//引入combineReducers,用于汇总多个reducer
import { combineReducers } from "redux";
//引入为form组件服务的reducer
import form from "./form";
//引入为list组件服务的reducer
import list from "./list";//汇总所有的reducer变为一个总的reducer
export default combineReducers({form,list,
});

store / actions / form.js

/*该文件专门为Form组件生成相关action对象
*/
import { FORM_ADD_COUNT, FORM_SUB_COUNT } from "../actionType";export const form_addCount = (data) => ({ type: FORM_ADD_COUNT, data });
export const form_subCount = (data) => ({ type: FORM_SUB_COUNT, data });export const formAddAsync = (data) => {return (dispatch) => {setTimeout(() => {dispatch(form_addCount(data));}, 2000);};
};

store / reducers / form.js

import { FORM_ADD_COUNT, FORM_SUB_COUNT } from "../actionType";
/*** form组件的reducer*/
// 初始状态
let initSate = {count: 0
};
export default function formReducer(state = initSate, action) {switch (action.type) {case FORM_ADD_COUNT:return {...state,count: state.count + 1}case FORM_SUB_COUNT:return {...state,count: state.count - 1}default:return state;}
}

store / actions / list.js

/*该文件专门为List组件生成相关action对象
*/
import { LIST_ADD_LIST } from "../actionType";// 同步action
export const list_addList = (data) => ({ type: LIST_ADD_LIST, data });

store / reducers / list.js

import { LIST_ADD_LIST } from '../actionType'// 初始状态
const initSate = {list:[]
}export default function listReducer(state=initSate,action){switch(action.type){case LIST_ADD_LIST:return {...state,list:[...state.list,action.data]}default:return state}
}

使用 App类.jsx

import React, { Component } from 'react';
import { connect } from "react-redux";
import { formAddAsync, form_addCount, form_subCount } from "../../store/actions/form";
import { list_addList } from "../../store/actions/list";
import ASon from "./ASon";
class App extends Component {state = {}componentDidMount() {}render(){// console.log('111',this.props);const { count,list } = this.propsconst addList = ()=>{let str = list && list.length ? '我是' + (list.length + 1) : '我是1'let arr = []arr.push(str)this.props.list_addList(arr)}return (<div>app<p>Count: {count}</p><button onClick={this.props.form_addCount}>Increment</button><button onClick={this.props.form_subCount}>Decrement</button><button onClick={this.props.formAddAsync}>异步add</button><div>----</div><ASon></ASon><div>----</div><div>{list ? list.map((item,idx)=>{return (<div key={idx}>{item}</div>)}) : ''}<button onClick={addList}>addList</button></div></div>)}
}// 拿到redux的值
const mapStateToProps = (state) => {return {count: state.form.count,list: state.list.list,};
};
// 拿到redux 所触发的
const mapDispatchToProps = {form_addCount,form_subCount,formAddAsync,list_addList
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

ASon.jsx

import React from 'react';
import { connect } from "react-redux";
import { form_addCount } from "../../store/actions/form";
const ASon = (props) => {return (<div className='content'>ASon 组件 count-{props.count} <br/><button onClick={props.form_addCount}>Increment</button></div>)
}// 拿到redux的值
const mapStateToProps = (state) => {return {count: state.form.count};
};
// 拿到redux 所触发的
const mapDispatchToProps = {form_addCount,
}
export default connect(mapStateToProps, mapDispatchToProps)(ASon);

效果

在这里插入图片描述

在这里插入图片描述

相关文章:

react 09之状态管理工具1 redux+ react-thunk的使用实现跨组件状态管理与异步操作

目录 react 09之状态管理工具1 redux react-thunk的使用实现跨组件状态管理与异步操作store / index.js store的入口文件index.js 在项目入口文件 引入store / actionType.js 定义action的唯一标识store / reducers / index.jsstore / actions / form.jsstore / reducers / for…...

opencv实战项目 手势识别-实现尺寸缩放效果

手势识别系列文章目录 手势识别是一种人机交互技术&#xff0c;通过识别人的手势动作&#xff0c;从而实现对计算机、智能手机、智能电视等设备的操作和控制。 1. opencv实现手部追踪&#xff08;定位手部关键点&#xff09; 2.opencv实战项目 实现手势跟踪并返回位置信息&…...

Netty对HPACK头部压缩的支持

前言 HTTP2终于支持对头部进行压缩传输了&#xff0c;Netty很早就支持HTTP2了&#xff0c;看下Netty对HPACK的实现源码&#xff0c;可以对HPACK理解的更深一下。 HpackDecoder Netty内置的编解码器Http2FrameCodec专门用来对HTTP2的各种Frame进行编解码&#xff0c;其中就包…...

C++:替换string中的字符

1.按照位置进行替换 string的成员函数replace可以满足这种需求,其变体有很多种,请参考官方文档,以下列举常用的两种: #include <iostream> #include <string> using namespace std;int main() {string s = "hello world";s.replace(s.begin(), s.b…...

【ChatGPT】自我救赎

ChatGPT辅助学习C之【在C中如果大数据类型转小数据类型会发生什么呢?】&#xff0c;今天问ChatGPT一个问题&#xff0c;让它解析下面这个C程序&#xff1a; #include <iostream> #include <cstdio> using namespace std; int main() {int a;long long b532165478…...

微信小程序(由浅到深)

文章目录 一. 项目基本配置1. 项目组成2. 常见的配置文件解析3. app.json全局的五大配置4.单个页面中的page配置5. App函数6.tabBar配置 二. 基本语法&#xff0c;事件&#xff0c;单位1. 语法2. 事件3. 单位 三. 数据响应式修改四 . 内置组件1. button2. image3. input4. 组件…...

冒泡排序 简单选择排序 插入排序 快速排序

bubblesort 两个for循环&#xff0c;从最右端开始一个一个逐渐有序 #include <stdio.h> #include <string.h> #include <stdlib.h>void bubble(int *arr, int len); int main(int argc, char *argv[]) {int arr[] {1, 2, 3, 4, 5, 6, 7};int len sizeof(…...

linux文件I/O之 open() 函数用法

#include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> typedef unsigned int mode_t ; int open(const char *pathname, int flags); int open(const char *pathname, int flags, mode_t mode); 函数功能 打开或创建一个文件 返回值 成功…...

用Java操作MySQL数据库

新建Maven项目 创建Maven项目 添加依赖 在pom.xml的标签里加上下面的内容 如果是MySQL 5.8那么的版本号是5.x.x, 例如5.1.49 如果是MySQL 8.0那么的版本号是8.x.x, 例如 8.0.28 <dependencies><!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java …...

SpringBoot启动报错:java: 无法访问org.springframework.boot.SpringApplication

报错原因&#xff1a;jdk 1.8版本与SpringBoot 3.1.2版本不匹配 解决方案&#xff1a;将SpringBoot版本降到2系列版本(例如2.5.4)。如下图&#xff1a; 修改版本后切记刷新Meavn依赖 然后重新启动即可成功。如下图&#xff1a;...

Vue3 setup语法糖 解决富文本编辑器上传图片64位码过长问题 quill-image-extend-module

引言&#xff1a; 富文本编辑器传图片会解码成64位&#xff0c;非常长导致数据库会报错第一种方法&#xff1a;将数据库类型改成 mediumtext第二种办法&#xff1a;本文中的方法 说明&#xff0c;本周文所用语法糖为Vue3 setup语法&#xff0c;即<script setup> 思路 拦…...

百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script>/*** * 百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换*///定义一些常量var x_PI = …...

论文浅尝 | CI4MRC:基于因果推断去除机器阅读理解中的名字偏差

笔记整理&#xff1a;朱珈徵&#xff0c;天津大学硕士&#xff0c;研究方向&#xff1a;问答 链接&#xff1a;https://aclanthology.org/2023.findings-acl.812/ 动机 机器阅读理解&#xff08;Machine Reading Comprehension&#xff0c;MRC&#xff09;是根据给定的文章回答…...

【校招VIP】测试计划之黑盒测试白盒测试

考点介绍&#xff1a; 黑盒测试&白盒测试是大厂和三四线公司校招的必考点。黑盒是以结果说话&#xff0c;白盒往往需要理解实现逻辑。现在商业项目的接口测试往往以白盒为主&#xff0c;也就是需要测试同学自己观察和修改数据库的值进行用例的测试。 但是无论采用哪种测试方…...

学习笔记整理-JS-01-语法与变量

文章目录 一、语法与变量1. 初识JavaScript2. JavaScript的历史3. JavaScript与ECMAScript的关系4. JavaScript的体系5. JavaScript的语言风格和特性 二、语法1. JavaScript的书写位置2. 认识输出语句3. REPL环境&#xff0c;交互式解析器4. 变量是什么5. 重点内容 一、语法与变…...

PHP之PHPExcel

include PHPExcel.php; include PHPExcel/Writer/Excel2007.php; //或者include PHPExcel/Writer/Excel5.php; 用于输出.xls的 //创建一个excel $objPHPExcel new PHPExcel(); // 输出Excel表格到浏览器下载 header(Content-Type: application/vnd.ms-excel); header(Content-…...

Redis系列(一):深入了解Redis数据类型和底层数据结构

Redis有以下几种常用的数据类型&#xff1a; redis数据是如何组织的 为了实现从键到值的快速访问&#xff0c;Redis 使用了一个哈希表来保存所有键值对。 Redis全局哈希表&#xff08;Global Hash Table&#xff09;是指在Redis数据库内部用于存储所有键值对的主要数据结构。…...

javaScript:如何获取html中的元素对象

目录 前言&#xff1a; 方法 1.通过id获取元素 2.通过标签名获取元素 3.通过类名class获取元素 获取body的方法 1.document.getElementsByTagName(body)[0] 2.document.body 相关代码 前言&#xff1a; 通过获取HTML中的元素对象&#xff0c;JavaScript可以对网页进行动…...

面试总结-webpack/git

说说你对webpack的理解 webpack 是一个静态模块打包器&#xff0c;整个打包过程就像是一条生产线&#xff0c;把资源从入口放进去&#xff0c;经过一系列的加工&#xff08;loader&#xff09;&#xff0c;最终转换成我们想要的结果&#xff0c;整个加工过程还会有监控&#x…...

深入解析美颜SDK:算法、效果与实现

在当今数字化社会中&#xff0c;图像处理和美化技术已经成为了许多应用领域的重要组成部分&#xff0c;尤其在视频直播领域&#xff0c;美颜技术更是无处不在。直播美颜SDK作为一种集成的软件工具包&#xff0c;为开发者和应用提供了强大的美颜功能。 一、算法原理 磨皮算法…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...