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

redux react-redux @reduxjs/toolkit

redux团队先后推出了redux、react-redux、@reduxjs/toolkit,这三个库的api各有不同。本篇文章就来梳理一下当我们需要在项目中集成redux,从直接使用redux,到使用react-redux,再到react-redux和@reduxjs/toolkit配合使用,分别需要调用到哪些api。

一、在react中集成redux

redux中通过createStore可以创建出store实例,在该实例上存在三个实例方法。

通过store.subscribe可以监听到state的改变,引起组件的重新渲染。

通过dispatch可以分发action,引起redux内部state的更新。

通过getState可以获取到redux内部的state。

以一个简单的计数器程序作为示例。

首先在App组件中引入Count组件,为其传入store实例作为props。

import React from "react";
import Count from "./components/Count";
import store from "./store";export default function App() {return <Count store={store} />;
}

在Count组件中,我们在组件挂载后通过store.subscribe监听redux的state,通过store,getState获取state,为按钮绑定点击事件,回调调用dispatch,传入action的返回值作为参数。

import React, { useEffect, useState } from "react";
import store from "../store";
import { createAddActions } from "../store/actions/count";export default function Count() {const [_, rerender] = useState({});useEffect(() => {store.subscribe(() => rerender({}));}, []);return (<div><div>sum: {store.getState()}</div><button onClick={() => store.dispatch(createAddActions(1))}>点我+1</button></div>);
}

接下来是store的编写。

// store/index.jsimport { countReducer } from "./reducers/count";
import { createStore } from "redux";export default createStore(countReducer);

reducers必须是一个纯函数,纯函数的概念是需要返回一个新的state替换原来的state,而不是直接在原来的state上修改。

// store/reducers/count.jsexport function countReducer(prevState, action) {switch (action.type) {case "add":return prevState + action.value;default:return 0;};
};

action的实现。

// store/actions/count.jsexport function createAddActions(value) {return {type: "add",value,};
};

二、在react中集成react-redux

react-redux提出了容器组件的概念,要求redux只能和容器组件进行通信,至于ui组件,只能通过props来获取容器组件传入的state和引起redux内部state改变的callback。

引入容器组件的目的在于尽量让ui组件内部看起来与其他不需要使用redux的组件无异。

如何理解无异呢?就是不要直接去调用store的实例方法,而是调用父组件提供的方法。当我们调用父组件提供的方法,而react-redux会再调用store的实例方法。

store.getState() -> props.state

store.dispatch() -> props.callback()

store.subscribe不再手动调用,而是由react-redux执行。

Count.js修改如下。

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { createAddActions } from "../store/actions/count";function Count(props) {return (<div><div>sum: {props.state}</div><button onClick={() => props.add(1)}>点我+1</button></div>);
}export default connect((state) => ({ state }),(dispatch) => ({add: (number) => dispatch(createAddActions(number)),})
)(Count);

connect的第二个参数还可以简写为对象形式。

export default connect((state) => ({ state }), { add: createAddActions })(Count);

我们使用redux的目的是在多个组件之间共享state,所以我们直接引用redux时,需要在多个组件中传入store作为props,react-redux针对此也做了优化。

我们只需引入Provider包裹App组件,在Provider中传入store作为props,我们就可以在容器组件中获取到props。其实底层就是调用了react的SomeContext.Provider,内部组件只要使用useContext就可以获取到store。

// index.jsimport React from "react";
import ReactDOM from 'react-dom/client';
import { Provider } from "react-redux";
import store from "./store";
import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}><App /></Provider>
);

在Count组件中,我们不再需要手动传入store。

import React from "react";
import Count from "./components/Count";export default function App() {return <Count />;
}

在现在的react-redux中,更推荐使用useSelector和useDispatch来代替connect。当我们使用useSelector和useDispatch获取state和分发action时,不再存在container组件,取而代之的是selector hook和dispatch hook。

对于connect而言,会优先从props中获取store,不存在的情况下再用React.useContext获取props,所以store有两种传入方式。

对于useSelector和useDispatch而言,他们只是Hook而不是组件,没有props,只能从React.useContext中获取store,所以如果外层没有Provider组件的话,项目是无法运行的。

此外,connect和Provider都实现了对store的监听。

import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { createAddActions } from "../store/actions/count";export default function Count() {const state = useSelector((state) => state);const dispatch = useDispatch();return (<div><div>sum: {state}</div><button onClick={() => dispatch(createAddActions(1))}>点我+1</button></div>);
}

三、在React中集成@reduxjs/toolkit和react-redux

@reduxjs/toolkit的作用如下:

1. 将initialState、reducers、actions整合在一起形成切片

2. 自动生成action,{name: sliceName/reducerName, payload: value}

3. 代替redux/thunk实现异步action功能

// store/slices/count.jsimport { createSlice } from "@reduxjs/toolkit";const counterSlice = createSlice({name: 'counter',initialState: 0,reducers: {add: (state, action) => {return state + action.payload;},},
});export const { add } = counterSlice.actions;export default counterSlice.reducer;
// store/index.jsimport countReducer from "./slices/count";
import { configureStore } from "@reduxjs/toolkit";export default configureStore({reducer: countReducer // reducer的结构对应state的结构
});

相关文章:

redux react-redux @reduxjs/toolkit

redux团队先后推出了redux、react-redux、reduxjs/toolkit&#xff0c;这三个库的api各有不同。本篇文章就来梳理一下当我们需要在项目中集成redux&#xff0c;从直接使用redux&#xff0c;到使用react-redux&#xff0c;再到react-redux和reduxjs/toolkit配合使用&#xff0c;…...

【偏好对齐】通过ORM直接推导出PRM

论文地址&#xff1a;https://arxiv.org/pdf/2412.01981 相关博客 【自然语言处理】【大模型】 ΨPO&#xff1a;一个理解人类偏好学习的统一理论框架 【强化学习】PPO&#xff1a;近端策略优化算法 【偏好对齐】PRM应该奖励单个步骤的正确性吗&#xff1f; 【偏好对齐】通过OR…...

Python与其他编程语言的区别是什么?

Python是一种广泛使用的高级编程语言&#xff0c;以其简洁的语法、强大的库支持和广泛的应用领域而著称。与其他编程语言相比&#xff0c;Python具有许多独特的特点和优势。以下将从多个方面详细探讨Python与其他编程语言的区别&#xff0c;并通过示例进行说明。 一、语法简洁…...

cuda11.6和对应的cudnn(windows)

因为每次不同的torch版本要下对应的cuda&#xff0c;这次刚好在Windows上下好了一个cuda11.6和对应的cudnn&#xff0c;直接放到网盘中&#xff0c;大家有需要对应版本的可以直接下载&#xff1a; 链接&#xff1a;https://pan.quark.cn/s/f153a53830d4 大家自取&#xff0c;c…...

24年无人机行业资讯 | 12.23-12.29

24年无人机行业资讯 | 12.23-12.29 1、 国家发改委新设低空经济司&#xff0c;助力低空经济规范发展2、商务部支持无人机民用国际贸易&#xff0c;强调出口管制与安全并重3、滨州高新区首架无人机成功下线4、 2025第九届世界无人机大会筹备推进会顺利召开5、2024年世界无人机竞…...

uniapp:微信小程序文本长按无法出现复制菜单

一、问题描述 在集成腾讯TUI后&#xff0c;为了能让聊天文本可以复制&#xff0c;对消息组件的样式进行修改&#xff0c;主要是移除下面的user-select属性限制&#xff1a; user-select: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms…...

qml Item详解

1、概述 Item是QML&#xff08;Qt Modeling Language&#xff09;的基础元素&#xff0c;所有其他可视化元素都继承自它。它代表了一个可视化的对象&#xff0c;虽然Item对象本身没有可视外观&#xff0c;但它定义了所有可视项之间通用的属性&#xff0c;比如位置、大小、旋转…...

【Java回顾】Day4 反射机制

反射机制 之前学过一部分&#xff0c;笔记在20250103Java包_网络编程.md里,这里在之前的笔记的基础上做一些补充。 反射&#xff1a;得到class对象后反向获取对象的各种信息。 包 Field 类或接口中的字段(成员变量)&#xff0c;动态访问和修改类的字段 模板 获取Class 对象 …...

【沉默的羔羊心理学】汉尼拔的“移情”游戏:操纵与理解的艺术,精神分析学视角下的角色互动

终极解读《沉默的羔羊》&#xff1a;弗洛伊德精神分析学视角下的深层剖析 关键词 沉默的羔羊弗洛伊德精神分析学角色心理意识与潜意识性别与身份 弗洛伊德精神分析学简介 弗洛伊德的精神分析学是心理学的一个重要分支&#xff0c;主要关注人类行为背后的无意识动机和冲突。…...

[深度学习] 大模型学习1-大语言模型基础知识

大语言模型&#xff08;Large Language Model&#xff0c;LLM&#xff09;是一类基于Transformer架构的深度学习模型&#xff0c;主要用于处理与自然语言相关的各种任务。简单来说&#xff0c;当用户输入文本时&#xff0c;模型会生成相应的回复或结果。它能够完成许多任务&…...

如何解决数据库和缓存不一致的问题

目录 一、Cache-Aside模式&#xff08;旁路缓存模式&#xff09; 二、Write-Through模式&#xff08;写透缓存模式&#xff09; 三、Write-Behind模式&#xff08;写回缓存模式&#xff09; 四、先删除缓存再更新数据库&#xff08;不推荐&#xff0c;存在风险&#xff09;…...

剑指Offer|LCR 021. 删除链表的倒数第 N 个结点

LCR 021. 删除链表的倒数第 N 个结点 给定一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5]示例 2&#xff1a; 输入&#xff1a;head [1], n 1…...

【NX入门篇】

NX入门篇 一、UG NX 由来二、软件如何启动&#xff08;UG NX 12.0&#xff09;三、使用步骤四、常用命令 一、UG NX 由来 UG NX由来&#xff1a; 1969 年&#xff1a;UG 的开发始于美国麦道航空公司&#xff0c;基于 C 语言开发实现&#xff1b;1976 年&#xff1a;UG问世&am…...

ubuntu如何禁用 Snap 更新

.禁用 Snap 更新&#xff08;通过修改 snapd 配置&#xff09; 打开并编辑 /etc/apt/apt.conf.d/50unattended-upgrades文件。 这个文件控制自动更新的行为。 sudo vim /etc/apt/apt.conf.d/50unattended-upgrades 里面有一行将里面的auto改为false即可禁用更新&#xff1a;…...

Spring AI Alibaba-对话模型(Chat Model)

对话模型&#xff08;Chat Model&#xff09;接收一系列消息&#xff08;Message&#xff09;作为输入&#xff0c;与模型 LLM 服务进行交互&#xff0c;并接收返回的聊天消息&#xff08;Chat Message&#xff09;作为输出。相比于普通的程序输入&#xff0c;模型的输入与输出…...

HTML——79.代码快捷输入方式

!DOCTYPE html> <html><head><meta charset"UTF-8"><title>代码快捷输入方式</title></head><body><!--1.父子关系&#xff1a;--><!--div>p 加Tab键--><div><p></p></div><…...

李宏毅机器学习课程笔记01 | 1.Introduction of Machine/Deep Learning

笔记是在语雀上面做的&#xff0c;粘贴在CSND上可能存在格式错误 机器学习的本质就是借助机器寻找一个转换函数 根据函数的输出类型&#xff0c;可以将机器学习进行分类 regression 回归任务&#xff1a;函数输出时一个数值classification 分类任务&#xff1a;人类设定好选项…...

1、pycharm、python下载与安装

1、去官网下载pycharm 官网&#xff1a;https://www.jetbrains.com/pycharm/download/?sectionwindows 2、在等待期间&#xff0c;去下载python 进入官网地址&#xff1a;https://www.python.org/downloads/windows/ 3、安装pycharm 桌面会出现快捷方式 4、安装python…...

计算机网络复习(学习通作业4、5、6系统答案)

&#x1f4e2;&#x1f4e2;&#x1f4e2;传送门 一、作业4一. 计算题&#xff08;共1题&#xff0c;100分&#xff09; 二、作业5一. 简答题&#xff08;共1题&#xff0c;30分&#xff09;路由器属于那一层的互联设备&#xff1f;路由器结构包含哪两个部分&#xff1f;请解释…...

javascript 绘制图表的几种方式

JavaScript 中,绘制图表的常用方法是使用图表库,它们提供了便捷的 API 和功能来实现图形和数据可视化。以下是几种常见的 JavaScript 图表绘制库以及如何使用它们来绘制图表的示例: 1. Chart.js Chart.js 是一个轻量级、简单易用的图表库,支持多种图表类型,如线性图、柱…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...