react18中使用redux管理公共数据仓库实现数据immutable更新

Immutable.js出自Facebook,是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构,使用结构共享。所有的更新操作都会返回新的值,但是在内部结构是共享的,来减少内存占用。Immutablejs官网

在上一篇介绍redux的文章,我们可以看到在创建的reducer中进行数据更改的时候,会使用…来复制状态数据,为的就是不对原数据进行直接修改,只做替换,就是为了实现react的数据不可变immutable。也就是说如果state的数据比较简单那还好,万一比较复杂,就要复制很多这样的结构数据,很占内存影响app的性能。
在这里插入图片描述

安装

npm i immutable redux-immutable -S

替换redux中的combineReducers,改用redux-immutable里面的

import { createStore } from "redux";
import { combineReducers } from "redux-immutable";import { CounterReducer } from "./CounterReducer";const reducers = combineReducers({count: CounterReducer,
});let store = createStore(reducers);store.subscribe(() => console.log(store.getState()));export default store;

改造reducers里面的代码

import { fromJS } from "immutable";
const initialState = fromJS({counter: 0,userInfo: {name: "John Doe",age: 25,},
});
function CounterReducer(state = initialState, action) {switch (action.type) {case "ADD":return state.update("counter", (val) => {console.log("🚀 ~ returnstate.update ~ val:", val);return val + 1;});case "DEC":return state.update('counter',value => value - 1)default:return state;}
}export { CounterReducer };

组件里面使用方式变化
DemoA.js

import store from "../../store";
function DemoA() {const count = store.getState().get("count").get("counter");return (<div><p> Demo A count: {count}</p></div>);
}
export default DemoA;

DemoB.js

import store from "../../store";function DemoB() {const data = store.getState().get("count");return (<div><p>Demo B</p><div><span>name: {data.getIn(["userInfo", "name"])}</span> <br /><span>age: {data.getIn(["userInfo", "age"])}</span><span>count:{data.get("counter")}</span></div><button onClick={() => store.dispatch({ type: "ADD" })}>add count</button></div>);
}
export default DemoB;

index.js

import DemoA from "./DemoA";
import DemoB from "./DemoB";
import store from "../../store/index";
import { useEffect, useState } from "react";
function Redux() {console.log(store.getState(), "store.getState()");const [counter, setCount] = useState(store.getState().get("count").get("counter"));useEffect(() => {const unsubscribe = store.subscribe(() => {console.log("aaaa");setCount(store.getState().get("count").get("counter"));});return () => {unsubscribe();};}, [counter]);return (<div>Redux<hr />parent count:{counter}<DemoA /><DemoB /></div>);
}export default Redux;

实现了同样的效果
请添加图片描述

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

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

相关文章

FFMPEG+Qt 实时显示本机USB摄像头1080p画面以及同步录制mp4视频

FFMPEGQt 实时显示本机USB摄像头1080p画面以及同步录制mp4视频 文章目录 FFMPEGQt 实时显示本机USB摄像头1080p画面以及同步录制mp4视频1、前言1.1 目标1.2 一些说明 2、效果3、代码3.1 思路3.2 工程目录3.3 核心代码 4、全部代码获取 1、前言 本文通过FFMPEG(7.0.2)与Qt(5.13.…

有色行业测温取样机器人 - SNK施努卡

SNK施努卡有色行业熔炼车间机器人测温取样 在有色行业&#xff0c;测温取样机器人专门设计用于自动化处理高温熔体的温度监测和样品采集任务。这类机器人在铜、铝、锌等金属冶炼过程中扮演着关键角色&#xff0c;以提高生产效率、确保产品质量并增强工作安全性。 主要工作项 …

基于 matlab 计算 TPI(地形位置指数)

1. TPI 简介 地形位置指数算法由 Weiss 提出&#xff0c;主要是根据局部地形高程对各类地貌单元提取。 其基本原理为&#xff1a;在邻域分析方法的基础上&#xff0c;计算每个栅格的高程值和该栅格领域内所有栅格的平均高程之间的差值&#xff0c;正值表示该栅格点高于领域内栅…

element ui中el-image组件查看图片的坑

比如说上传组件使用el-image-viewer组件去看&#xff0c;如果用错了&#xff0c;你会发现&#xff0c;你每次只能看一张图片 <template><div><el-upload action"#" list-type"picture-card" :auto-upload"false" :file-list"…

Spring Cloud --- Sentinel 熔断规则

熔断规则 慢调用比例 发送10个请求&#xff0c;每个请求理想响应时长为200毫秒。统计1秒钟&#xff0c;如果10个请求响应时间超过200毫秒的比例大于等于10%&#xff0c;则触发熔断&#xff0c;熔断5秒。 异常比例 1秒内&#xff0c;发送请求出现异常率为20%&#xff0c;则触…

arcgis中dem转模型导入3dmax

文末分享素材 效果 1、准备数据 (1)DEM (2)DOM 2、打开arcscene软件 3、加载DEM、DOM数据 4、设置DOM的高度为DEM

LabVIEW中句柄与引用

在LabVIEW中&#xff0c;句柄&#xff08;Handle&#xff09; 是一种用于引用特定资源或对象的标识符。它类似于指针&#xff0c;允许程序在内存中管理和操作复杂的资源&#xff0c;而不需要直接访问资源本身。句柄用于管理动态分配的资源&#xff0c;如队列、文件、网络连接、…

Vision-Language Models for Vision Tasks: A Survey阅读笔记

虽然LLM的文章还没都看完&#xff0c;但是终究是开始看起来了VLM&#xff0c;首当其冲&#xff0c;当然是做一片文献综述啦。这篇文章比较早了&#xff0c;2024年2月份出的last version。 文章链接&#xff1a;https://arxiv.org/abs/2304.00685 GitHub链接&#xff1a;GitHu…

Java Web开发教程:从入门到精通

Java Web开发教程&#xff1a;从入门到精通 前言 在当今互联网时代&#xff0c;Web开发已成为一个炙手可热的领域。Java作为一种成熟的编程语言&#xff0c;以其稳定性和跨平台性&#xff0c;成为了Web开发的热门选择。本文将带您从基础知识入手&#xff0c;逐步深入Java Web…

C#与C++交互开发系列(十):数组传递的几种形式

前言 在C#和C的交互开发中&#xff0c;数组传递是一个非常常见且实用的场景。数组可以作为方法的参数&#xff0c;也可以作为响应结果返回。在本篇博客中&#xff0c;我们将探讨几种常见的数组传递方式&#xff0c;展示如何在C#与C之间进行有效的数据交换。我们将主要介绍以下…

代谢组数据分析(二十):通过WGCNA识别核心代谢物

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍识别核心基因加载R包导入数据数据预处理检查数据完整性计算软阈值soft根据软阈值构建接矩阵和拓扑重叠矩阵聚类并构建网络拓扑重叠热图查看具体模块的代谢物表达热图识别表型相关模…

word表格跨页后自动生成的顶部横线【去除方法】

Hello World! Its been a long time. 这一年重心放在了科研、做事、追寻新的经历上&#xff0c;事有正事、琐事、幸事、哀事&#xff0c;内心与认知成长了一些&#xff0c;思想成熟了几分&#xff0c;技艺也有若干收获。不管怎样&#xff0c;来打个卡吧&#xff0c;纪念一下&…

边缘计算路由网关R40钡铼技术3LAN口1WAN口Modbus协议

在当今快速发展的工业互联网时代&#xff0c;随着物联网&#xff08;IoT&#xff09;与大数据分析的日益融合&#xff0c;边缘计算成为了提高数据处理效率、降低延迟的关键技术。 产品特点&#xff1a; 多接口支持&#xff1a;R40B拥有3个LAN口和1个WAN口的设计&#xff0c;能…

CSS背景之多背景

设置背景图片大小 background-size: 500px 500px; 取值&#xff1a;&#xff08;1&#xff09;第一个值为宽&#xff0c;第二个值为高。 只有一个值的话就是正方的。 <!DOCTYPE html> <html> <head><style type"text/css">.box{width: 800…

Go 版本升级 | 统计 Github 社区 Go 版本分布情况

背景 因为最近三年用的 Go 版本是 1.16&#xff0c;但最新的版本升级到了 1.23&#xff0c;很多依赖的三方包最新文件都已经升级&#xff0c;使用了泛型以及 GO 新版本的特性&#xff0c;导致我只能适配 Go1.16 的三方包旧版本&#xff0c;但这种问题发生的频率多了后&#xf…

分享几个办公类常用的AI工具

办公类 WPS AI讯飞智文iSlideProcessOn亿图脑图ChatPPT WPS AI 金山办公推出的协同办公 AI 应用&#xff0c;具有文本生成、多轮对话、润色改写等多种功能&#xff0c;可以辅助用户进行文档编辑、表格处理、演示文稿制作等办公操作。 https://ai.wps.cn/ 讯飞智文 科大讯飞推…

从零开始:AI制作PPT工具大比拼

现在真的万物皆可AI了&#xff0c;甚至是令人头疼的PPT&#xff0c;也可以直接用AI来搞定了。作为一个PPT新手&#xff0c;我最近对AI制作PPT这个话题产生了浓厚的兴趣。我决定亲自试一试市面上几款热门的AI制作PPT工具&#xff1a;笔灵AIPPT、轻竹PPT、博思白板AIPPT和KimiAI。…

了解Oracle表结构查询:获取列信息与注释

目录 1. 基本知识2. Demo3. 补充Mysql 1. 基本知识 Oracle数据库中&#xff0c;表结构信息包含列名、数据类型、长度、可空性、默认值以及字段注释等&#xff0c;这些信息对于理解数据库设计和维护非常重要 基本的属性要点如下&#xff1a; 表名&#xff08;TABLE_NAME&…

uniApp 加载google地图 并规划路线

uniApp 加载google地图 并规划路线 备注:核心代码实例 备注: 打开谷歌地图失败的话 参考google开发文档 https://developers.google.com/maps/documentation/urls/ios-urlscheme?hlzh-cn#swift核心代码 mounted() {this.loadGoogleMapsScript(); }, methods: {//加载loadGo…

LCD手机屏幕高精度贴合

LCD手机屏幕贴合&#xff0c;作为智能手机生产线上至关重要的一环&#xff0c;其质量直接关乎用户体验与产品竞争力。这一工艺不仅要求屏幕组件间的无缝对接&#xff0c;达到极致的视觉与触觉效果&#xff0c;还需确保在整个生产过程中&#xff0c;从材料准备到最终成品&#x…