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

Redux,react-redux,dva,RTK

1.redux的介绍

Redux – 李立超 | lilichao.com

2.react-redux

1)react-Redux将所有组件分成两大类  

  1. UI组件
      1. 只负责 UI 的呈现,不带有任何业务逻辑
      2. 通过props接收数据(一般数据和函数)
      3. 不使用任何 Redux 的 API
      4. 一般保存在components文件夹下
  2. 容器组件
      1. 负责管理数据和业务逻辑,不负责UI的呈现
      2. 使用 Redux 的 API
      3. 一般保存在containers文件夹

2)react-redux相比较于react的不同,在于它提供了一些api来方便我们使用redux,

        1.Provider 组件: Providerreact-redux库提供的顶层组件,它可以包裹整个React应用。通过Provider,Redux的store可以被传递给整个React组件树,使得所有的组件都能够访问Redux的状态。

        2.connect 函数: connectreact-redux提供的函数,它可以连接React组件与Redux的store,并在组件中注入Redux的状态和操作。这样,组件就能够通过props直接访问Redux中的状态,而不需要手动订阅状态变化或分发actions。

代码示例:(还是以一个简单的计数器作为例子)

         创建Redux store 和 reducer:

// 文件:store.js
import { createStore } from 'redux';const initialState = {count: 0,
};const counterReducer = (state = initialState, action) => {switch (action.type) {case 'INCREMENT':return { ...state, count: state.count + 1 };case 'DECREMENT':return { ...state, count: state.count - 1 };default:return state;}
};const store = createStore(counterReducer);export default store;

          创建React组件,使用react-redux中的connect函数连接React组件与Redux store:

// 文件:Counter.js
import React from 'react';
import { connect } from 'react-redux';const Counter = ({ count, increment, decrement }) => (<div><p>Count: {count}</p><button onClick={increment}>Increment</button><button onClick={decrement}>Decrement</button></div>
);const mapStateToProps = (state) => ({count: state.count,
});const mapDispatchToProps = (dispatch) => ({increment: () => dispatch({ type: 'INCREMENT' }),decrement: () => dispatch({ type: 'DECREMENT' }),
});export default connect(mapStateToProps, mapDispatchToProps)(Counter);

      在应用的入口文件中,使用Provider组件将Redux store传递给整个应用: 

// 文件:index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';const App = () => (<Provider store={store}><Counter /></Provider>
);ReactDOM.render(<App />, document.getElementById('root'));

3.dva.js

1)dvajs,全称是"DvaJS",是一个基于React和Redux的前端应用框架。它是一个由阿里巴巴出品的框架,旨在简化React应用的开发流程,尤其是在状态管理方面。DvaJS借鉴了Redux的思想,但在其基础上进行了封装,提供了一些方便开发的额外特性。

官网:快速上手 | DvaJS

与传统的Redux和React-Redux相比,DvaJS 提供了更加简化和约定的开发方式,主要包括以下几个核心概念:

  1. Model: DvaJS引入了Model的概念,将数据、业务逻辑和界面表现进行了组织。一个Model包括state、reducers、effects等内容,使得相关的代码可以更容易地维护在一起。

  2. Effects: Effects是用于处理异步操作(例如数据请求)的地方。在DvaJS中,Effects通过Redux-saga来处理异步流程,使得异步逻辑更加清晰。

  3. Reducer和Action的简化: DvaJS封装了Redux的Reducer和Action的创建,通过一些简单的约定,减少了编写冗长的Reducer和Action的代码。

  4. Router的集成: DvaJS内置了React-Router,使得路由的管理变得更加简单。

计数器实例:

// models/counter.js
export default {namespace: 'counter',state: 0,reducers: {increment(state) {return state + 1;},decrement(state) {return state - 1;},},
};// index.js
import React from 'react';
import dva from 'dva';
import { connect } from 'dva';
import Counter from './Counter';// 创建dva应用
const app = dva();// 注册Model
app.model(require('./models/counter').default);// 注册路由
app.router(() => <Counter />);// 启动应用
app.start('#root');

  4.RTK

Redux Toolkit(RTK) – 李立超 | lilichao.com

相关文章:

Redux,react-redux,dva,RTK

1.redux的介绍 Redux – 李立超 | lilichao.com 2.react-redux 1&#xff09;react-Redux将所有组件分成两大类 UI组件 只负责 UI 的呈现&#xff0c;不带有任何业务逻辑通过props接收数据(一般数据和函数)不使用任何 Redux 的 API一般保存在components文件夹下容器组件 …...

基于Java SSM框架实现高校信息资源共享平台系统【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现高校信息资源共享平台系统演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们…...

SpringMvc入坑系列(一)----maven插件启动tomcat

springboot傻瓜式教程用久了&#xff0c;回过来研究下SSM的工作流程&#xff0c;当然从Spring MVC开始&#xff0c;从傻瓜式入门处理请求和页面交互&#xff0c;再到后面深入源码分析。 本人写了一年多的后端和半年多的前端了。用的都是springbioot和vue&#xff0c;源码一直来…...

Leetcode—337.打家劫舍III【中等】

2023每日刷题&#xff08;五十二&#xff09; Leetcode—337.打家劫舍III 算法思想 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(null…...

列表标签的介绍与使用

列表的作用&#xff1a; 整齐、整洁、有序&#xff0c;它作为布局会更加自由和方便。 根据使用情景不同&#xff0c;列表可以分为三大类&#xff1a;无序列表、有序列表和自定义列表 无序列表 <ul> 标签表示 HTML 页面中项目的无序列表&#xff0c;一般会以项目符号呈…...

浅谈什么是语音芯片的白噪音支持功能:打造舒适家居与优质音频体验

随着科技的不断进步和人们对生活质量要求的提升&#xff0c;语音芯片已经成为了现代电子产品中不可或缺的一部分。而在这些语音芯片中&#xff0c;支持白噪音的功能逐渐受到人们的关注。本文将围绕语音芯片中的白噪音支持功能展开讨论&#xff0c;带您领略其带来的舒适家居与优…...

【QED】高昂的猫 Ⅰ

目录 题目背景题目描述输入格式输出格式 测试样例样例说明数据范围 思路核心代码 题目背景 这是小橘。因为它总是看起来很高傲&#xff0c;所以人送外号“高昂的猫”。 题目描述 "锕狗"的房间里放着 n n n ( 1 ≤ n ≤ 1 0 9 ) (1 \leq n \leq 10^9) (1≤n≤109)个…...

Redis如何做内存优化?

Redis如何做内存优化&#xff1f; 1、缩短键值的长度 缩短值的长度才是关键&#xff0c;如果值是一个大的业务对象&#xff0c;可以将对象序列化成二进制数组&#xff1b; 首先应该在业务上进行精简&#xff0c;去掉不必要的属性&#xff0c;避免存储一些没用的数据&#xff1…...

倪海厦:教你正确煮中药,发挥最大药效

同样的一个汤剂&#xff0c;我开给你&#xff0c;你如果煮的方法不对&#xff0c;吃下去效果就没那么好。 所以&#xff0c;汤&#xff0c;取它的迅捷&#xff0c;速度很快&#xff0c;煮汤的时候还有技巧&#xff0c;你喝汤料的时候&#xff0c;你到底是喝它的气&#xff0c;…...

C++学习笔记:继承

继承 什么是继承?继承的写法基类和派生类的赋值转换继承中的作用域派生类的默认成员函数单继承,多继承,虚拟继承is-a 和 has-a 什么是继承? 继承是C语言面向对象的三大特性之一&#xff0c;是面向对象程序设计使代码可以复用的最重要的手段,基本都是在一个类的基础上为了增加…...

音频/视频、信息和通信技术设备安全标准UL62368-1

UL 62368-1&#xff0c;第 3 版&#xff0c;2019 年 12 月 13 日- UL 音频/视频、信息和通信技术设备安全标准 - 第 1 部分&#xff1a;安全要求 IEC 62368 的这一部分适用于该领域内电气和电子设备的安全音频、视频、信息和通信技术&#xff0c;以及额定电压不超过 600 V 的商…...

macos下安装科研绘图软件Origin

科研人必备软件Origin&#xff0c;主要是考虑到很多期刊都要求绘制origin可编辑的图&#xff0c;所以有些时候必须用这个软件&#xff0c;但是这个软件macos并不支持&#xff0c;所以必须考虑其他的方案&#xff0c;我没有安装虚拟机&#xff0c;而是使用crossover 安装crosso…...

安全快速地删除 MySQL 大表数据并释放空间

一、需求 按业务逻辑删除大量表数据操作不卡库&#xff0c;不能影响正常业务操作操作不能造成 60 秒以上的复制延迟满足以上条件的前提下&#xff0c;尽快删除数据并释放所占空间 表结构如下&#xff1a; create table space_visit_av (userid bigint(20) not null comment 用…...

未使用 “严格模式“(js的问题)

"严格模式"&#xff08;即在JavaScript源文件的开头包括 "use strict"&#xff1b;&#xff09;是一种自愿在运行时对JavaScript代码执行更严格的解析和错误处理的方式&#xff0c;同时也使它更安全。 但是&#xff0c;不使用严格模式本身并不是一个 &quo…...

Verilog基础:$random系统函数的使用

相关阅读 Verilog基础​编辑https://blog.csdn.net/weixin_45791458/category_12263729.html $random系统函数语法的BNF范式如下所示&#xff0c;有关BNF范式相关内容&#xff0c;可以浏览以往文章Verilog基础&#xff1a;巴科斯范式(BNF)。 $random系统函数在每次调用时返回一…...

数据库Delete的多种用法

数据库的Delete操作是用来删除数据库中的数据记录的&#xff0c;它是数据库操作中的一种重要操作&#xff0c;能够帮助用户删除不需要的数据&#xff0c;以便保持数据库的整洁和高效。在使用Delete操作时&#xff0c;需要注意确保操作的准确性和安全性&#xff0c;以免误删重要…...

鸿蒙前端开发-构建第一个ArkTS应用(Stage模型)

创建ArkTS工程 若首次打开DevEco Studio&#xff0c;请点击Create Project创建工程。如果已经打开了一个工程&#xff0c;请在菜单栏选择File > New > Create Project来创建一个新工程。 选择Application应用开发&#xff08;本文以应用开发为例&#xff0c;Atomic Serv…...

从零开始搭建链上dex自动化价差套利程序(12)

其他品种 扩展到其他币种的价差套利 1.eth 新建文件get_depth_data_eth.py import asyncio from apexpro.http_public import HttpPublic from dydx3 import Client from dydx3.constants import MARKET_ETH_USD# 定义交易对列表 symbol ETHUSDC market MARKET_ETH_USD# …...

MySQL 数据库如何实现 XA 规范?

本文我们来讨论 MySQL 的 XA 规范有哪些应用相关的内容。 MySQL 为我们提供了分布式事务解决方案&#xff0c;在前面的内容中提到过 binlog 的同步&#xff0c;其实是 MySQL XA 规范的一个应用&#xff0c;那么 XA 规范是如何定义的&#xff0c;具体又是如何应用的呢&#xff…...

SVN修改已提交版本的日志方法

1.在工做中一直是使用svn进行項目的版本控制的&#xff0c;有时候因为提交匆忙&#xff0c;或是忘了添加Log&#xff0c;或是Log内容有错误。遇到此类状况&#xff0c;想要在查看项目的日志时添加log或是修改log内容&#xff0c;遇到以下错误&#xff1a; Repository has not b…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

深入浅出WebGL:在浏览器中解锁3D世界的魔法钥匙

WebGL&#xff1a;在浏览器中解锁3D世界的魔法钥匙 引言&#xff1a;网页的边界正在消失 在数字化浪潮的推动下&#xff0c;网页早已不再是静态信息的展示窗口。如今&#xff0c;我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室&#xff0c;甚至沉浸式的V…...

门静脉高压——表现

一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构&#xff1a;由肠系膜上静脉和脾静脉汇合构成&#xff0c;是肝脏血液供应的主要来源。淤血后果&#xff1a;门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血&#xff0c;引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...