当前位置: 首页 > 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 是一个轻量级、简单易用的图表库,支持多种图表类型,如线性图、柱…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...