【React】Redux Toolkit的使用

Redux toolkit使用

  • 1. 背景
  • 2.文档
  • 3. 使用
    • 3.1 安装
    • 3.2 创建入口文件 redux
    • 3.3 redux/index.js
    • 3.4 redux/reducer.js
    • 3.5 使用示例

1. 背景

Redux Toolkit 出现的背景可以追溯到对 Redux 的使用和开发中出现的一些常见模式和问题。Redux 是一个非常强大的状态管理库,但在实际使用中,它可能涉及到一些繁琐的模板代码编写,比如定义 action 类型、编写 action 创建函数、编写 reducer 等等。同时,Redux 的设计哲学也是相对低级的,需要开发者对一些细节进行处理。
  为了简化 Redux 的使用,提高开发效率,并且让 Redux 更易于理解和维护,Redux Toolkit 应运而生。Redux Toolkit 是 Redux 官方推荐的工具集,它旨在提供一组工具和最佳实践,帮助开发者更快速地编写 Redux 代码,并且在不牺牲灵活性的前提下提供更好的开发体验。

Redux Toolkit 的出现解决了几个问题:

  1. 简化 Redux 的使用:Redux Toolkit 提供了一组工具和函数,可以帮助开发者更轻松地定义 action、编写 reducer,并且提供了一种更简洁的方式来组织和管理状态。

  2. 减少样板代码:Redux Toolkit 使用了一些现代 JavaScript 的特性,比如 immer 库来处理不可变性,以及 createSlice 函数来自动生成 action 类型和 action 创建函数,从而减少了大量的样板代码。

  3. 默认集成 Redux DevTools Extension:Redux Toolkit 默认集成了 Redux DevTools Extension,使得开发者可以更方便地进行状态管理调试和监控。

  4. 提供更好的性能:Redux Toolkit 在内部做了一些优化,比如使用了 immer 库来实现不可变性,这使得 Redux Toolkit 在性能上有一些优势。

总的来说,Redux Toolkit 的出现是为了让 Redux 更易于上手、更高效、更灵活,从而提升开发者的开发体验和代码质量。

2.文档

英文文档:
https://redux-toolkit.js.org/introduction/getting-started


中文文档:
https://cn.react-redux.js.org/introduction/getting-started/

3. 使用

3.1 安装

# 如果你使用 npm:
npm i @reduxjs/toolkit# 或者你使用 Yarn:
yarn add @reduxjs/toolkit

3.2 创建入口文件 redux

- redux- index.js- reducer.js 

3.3 redux/index.js

import { configureStore } from "@reduxjs/toolkit";
import { SetInitState } from "./reducer";const store = configureStore({  reducer: {SetInitState,}
})export default store;

3.4 redux/reducer.js


import { createSlice } from '@reduxjs/toolkit';// 初始状态
const initState = {count: 1
}// 创建redux切片对象
export const setInitState = createSlice({name: "appState", // 切片名称 用来标识reduxinitialState: initState, // 需要管理的状态reducers: {  // 配置reducer 用以更新的状态countAdd (state) {state.count++;},setCount (state, action) {state.count = action.payload;}}
})// 导出状态
export const { countAdd, setCount } = setInitState.actions;
// 导出reducer
export const SetInitState = setInitState.reducer;

3.5 使用示例

  1. 根目录index.js中使用Provider包裹根组件
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import App from './App'
import { BrowserRouter } from 'react-router-dom'const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<BrowserRouter><Provider store={store}><App /></Provider  ></BrowserRouter>
)reportWebVitals()
  1. 子组件中使用
import { useSelector } from 'react-redux'const App = () => {// 拿到redux定义的初始状态const { count } = useSelector((state) => state.SetInitState)return (<div>{count}</div> )}

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

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

相关文章

挑战谷歌巨头地位?消息称OpenAI于5月9日发布ChatGPT版搜索引擎 | 最新快讯

来源&#xff1a; IT 之家 5 月 3 日消息&#xff0c;谷歌 Gemini 和微软 Copilot 之间的 AI 大战继续升级&#xff0c;最新消息称 OpenAI 有望今年 5 月 9 日推出基于 ChatGPT 的全新搜索产品&#xff0c;进一步挑战谷歌的传统搜索巨头地位。 Reddit 网友近日发帖&#xff0c;…

JavaFX 动态加载目录下所有WAV文件并逐个播放

在JavaFX中动态加载一个目录下的所有.wav文件并逐个播放&#xff0c;你可以使用java.nio.file包来遍历目录&#xff0c;并使用javax.sound.sampled包来播放音频文件。不过&#xff0c;需要注意的是&#xff0c;JavaFX本身并不直接支持音频播放&#xff0c;但你可以使用Java的标…

Go实现网页 临时电脑目录访问

简介 下载好电影电视剧但是又不想呆在电脑旁边&#xff0c; 你可能只需要开启一个Go服务&#xff0c; 简单几句代码....实现 中间件 做一个简单的包装器&#xff0c; 用于处理所有外部访问。 IP过滤器 过滤IP&#xff0c; 对不符合的IP进行过滤 步骤 代码 IP过滤器 filt…

Stable Diffusion学习线路,提示词及资源分享

1. 提示词的基础概念 提示词分为正面提示词&#xff08;Prompts&#xff09;和反面提示词&#xff08;Negative Prompts&#xff09;。正面提示词代表你希望画面中出现的内容&#xff0c;而反面提示词代表你不希望画面中出现的内容。提示词通常是以英文书写&#xff0c;最小单…

nginx--压缩https证书favicon.iconginx隐藏版本号 去掉nginxopenSSL

压缩功能 简介 Nginx⽀持对指定类型的⽂件进行压缩然后再传输给客户端&#xff0c;而且压缩还可以设置压缩比例&#xff0c;压缩后的文件大小将比源文件显著变小&#xff0c;这样有助于降低出口带宽的利用率&#xff0c;降低企业的IT支出&#xff0c;不过会占用相应的CPU资源…

逻辑回归实战 -- 是否通过考试

http://链接: https://pan.baidu.com/s/1-uy-69rkc4WjMpPj6iRDDw 提取码: e69y 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 数据集下载链接 这是个二分类问题&#xff0c;通过x1,x2两个指标得出是否通过考试的结论。 逻辑回归的激活函数是sigmoid函数&…

数学符号的标准写法 (机器学习方向)

摘要: 本贴讨论数学符号的标准写法, 列出 Latex 中使用的命令. 表 1. 矩阵相关符号 符号/操作意义Latex 命令 A \mathbf{A} A矩阵\mathbf{A} A i \mathbf{A}_{i} Ai​带下标的矩阵, 注意不是矩阵的元素 (entry)\mathbf{A}_{i} A i j \mathbf{A}_{ij} Aij​带双下标的矩阵矩阵\m…

【004_音频开发_基础篇_ALSA插件使用】

004_音频开发_基础篇_ALSA插件使用 文章目录 004_音频开发_基础篇_ALSA插件使用创作背景/etc/asound.conf 示例分析默认设备/默认控制器/plug插件softvol 插件采样率转换插件pcm.audio_processing 创作背景 学历代表过去、能力代表现在、学习力代表将来。 一个良好的学习方法是…

用git上传本地文件到github

两种方式&#xff1a;都需要git软件&#xff08;1&#xff09;VScode上传 &#xff08;2&#xff09;直接命令行&#xff0c;后者不需要VScode软件 &#xff08;1&#xff09;vscode 上传非常方便&#xff0c;前提是下载好了vscode和git软件 1 在项目空白处右击&#xff0c;弹…

SpringCloud微服务项目创建流程

为了模拟微服务场景&#xff0c;学习中为了方便&#xff0c;先创建一个父工程&#xff0c;后续的工程都以这个工程为准&#xff0c;实用maven聚合和继承&#xff0c;统一管理子工程的版本和配置。 后续使用中只需要只有配置和版本需要自己规定之外没有其它区别。 微服务中分为…

Redis---------实现更改数据业务,包括缓存更新,缓存穿透雪崩击穿的处理

三种更新策略 内存淘汰是Redis内存的自动操作&#xff0c;当内存快满了就会触发内存淘汰。超时剔除则是在存储Redis时加上其有限期(expire)&#xff0c;有限期一过就会自动删除掉。而主动更新则是自己编写代码去保持更新&#xff0c;所以接下来研究主动更新策略。 主动更新策略…

【数据结构(邓俊辉)学习笔记】向量06——位图

文章目录 0.概述1.结构2.实现3. 应用3.1 去重3.2 筛法 0.概述 位图&#xff08;Bitmap&#xff09;是一种特殊的序列结构&#xff0c;可用以动态地表示由一组&#xff08;无符号&#xff09;整数构成的集合。 test() 判断k 是否存在集合S中。set() 将k 加入到集合S中。clear…

每日OJ题_贪心算法二④_力扣2418. 按身高排序

目录 力扣2418. 按身高排序 解析代码 力扣2418. 按身高排序 2418. 按身高排序 难度 简单 给你一个字符串数组 names &#xff0c;和一个由 互不相同 的正整数组成的数组 heights 。两个数组的长度均为 n 。 对于每个下标 i&#xff0c;names[i] 和 heights[i] 表示第 i 个…

【Unity】在空物体上实现 IPointerClickHandler 不起作用

感谢Unity接口IPointerClickHandler使用说明_哔哩哔哩_bilibiliUnity接口IPointerClickHandler使用说明, 视频播放量 197、弹幕量 0、点赞数 3、投硬币枚数 2、收藏人数 2、转发人数 0, 视频作者 游戏创作大陆, 作者简介 &#xff0c;相关视频&#xff1a;在Unity多场景同时编辑…

京东初级运营必修课程,从零开始学习(49节课)

课程内容&#xff1a; 01.1.全面解析店铺后台的各项功能 02.2.商品要素的重要性及如何打造黄金标题 03.3.手把手带你完成商品上架 04.4.为啥你的流量不转化-诸葛 05.5.怎么策划一张高点击率的照片 06.6.内功优化之数据化标题创建 07.7.内功优化之如何高转化活动落地页 …

node应用部署运行案例

生产环境: 系统&#xff1a;linux centos 7.9 node版本&#xff1a;v16.14.0 npm版本:8.3.1 node应用程序结构 [rootRainYun-Q7c3pCXM wiki]# dir assets config.yml data LICENSE node_modules nohup.out output.log package.json server wiki.log [rootRainYun-Q7c…

SpringBoot集成Log2j4指定外部配置文件源码解读

一、背景 程序读取外部log4j2.xml配置文件方式为启动命令添加了--logging.config/path/log4j2.xml&#xff0c;因系统安全整改&#xff0c;将/var/log/目录改为了700&#xff0c;程序使用非root启动时log4j2报错无法在/var/log目录下创建日志文件。经排查发现jar包的classpath…

python的self类

在Python的类&#xff08;class&#xff09;定义中&#xff0c;self 是一个变量名&#xff0c;它代表实例本身。在类定义的方法中&#xff0c;self 总是作为第一个参数&#xff0c;并且这是一个约定俗成的用法。通过 self&#xff0c;你可以访问和操作类的属性&#xff08;vari…

Nacos如何支持服务发现和注册?

Nacos如何支持服务发现和注册 在微服务架构的浪潮中&#xff0c;服务发现和注册成为了支撑整个架构稳定运行的关键技术之一。而Nacos&#xff0c;作为阿里巴巴开源的一个动态服务发现、配置管理和服务管理平台&#xff0c;凭借其简单易用、功能强大的特性&#xff0c;受到了广…

我的创作纪念日—128天的坚持|分享|成长

☘️博主介绍☘️&#xff1a; ✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux&#xff0c;也在扩展大数据方向的知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章&am…