位置: IT常识 - 正文

Redux工具包(一) - Redux Toolkit的基本使用(redux-tookit)

编辑:rootadmin
Redux工具包(一) - Redux Toolkit的基本使用 文章目录Redux工具包的使用Redux Toolkit介绍Redux Toolkit基本使用Redux工具包的使用Redux Toolkit介绍

推荐整理分享Redux工具包(一) - Redux Toolkit的基本使用(redux-tookit),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:redux的使用流程,redux-tookit,redux/toolkit,redux-toolkit,redux tooltik,redux tool,redux-tookit,redux-toolkit,内容如对您有帮助,希望把文章链接给更多的朋友!

Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。

在前面我们学习Redux的时候应该已经发现,redux的编写逻辑过于的繁琐和麻烦。

并且代码通常分拆在多个文件中(虽然也可以放到一个文件管理,但是代码量过多,不利于管理);

Redux Toolkit包旨在成为编写Redux逻辑的标准方式,从而解决上面提到的问题;

在很多地方为了称呼方便,也将之称为“RTK”;

安装Redux Toolkit:npm install @reduxjs/toolkit react-redux

Redux Toolkit的核心API主要是如下几个:

configureStore: 包装createStore以提供简化的配置选项和良好的默认值。它可以自动组合你的 slice reducer,添加你提供 的任何 Redux 中间件,redux-thunk默认包含,并启用 Redux DevTools Extension。

createSlice: 接受reducer函数的对象、切片名称和初始状态值,并自动生成切片reducer,并带有相应的actions。

createAsyncThunk: 接受一个动作类型字符串和一个返回承诺的函数,并生成一个pending/fulfilled/rejected基于该承诺分 派动作类型的 thunk

Redux Toolkit基本使用Redux工具包(一) - Redux Toolkit的基本使用(redux-tookit)

configureStore用于创建store对象,常见参数如下:

reducer: 将slice中的reducer可以组成一个对象传入此处;

middleware:可以使用参数,传入其他的中间件(自行了解);

devTools:是否配置devTools工具,默认为true;

import { configureStore } from "@reduxjs/toolkit"// 导入reducerimport counterReducer from "./features/counter"const store = configureStore({ reducer: { counter: counterReducer }, // 例如可以关闭redux-devtool devTools: false})export default store

createSlice主要包含如下几个参数:

name:用户标记slice的名词

在之后的redux-devtool中会显示对应的名词;

initialState:初始化值

第一次初始化时的值;

reducers:相当于之前的reducer函数

对象类型,对象中可以添加很多的函数;

函数类似于redux原来reducer中的一个case语句;

函数的参数:

参数一: state, 当前的state状态参数二: 传递的actions参数, actions有两个属性, 一个是自动生成的type, 另一个是传递的参数放在payload中;

createSlice返回值是一个对象,包含所有的actions;

import { createSlice } from "@reduxjs/toolkit"const counterSlice = createSlice({ name: "counter", initialState: { counter: 99 }, reducers: { // 直接对actions解构拿到payload changeNumber(state, { payload }) { state.counter = state.counter + payload } }})// reducers当中的方法会放在counterSlice的actions中, 用于派发actionexport const { changeNumber } = counterSlice.actions// 注意: 导出的是reducer, 用于在index.js中对reducer进行组合export default counterSlice.reducer

接下来使用store中的counter数据和修改counter的操作和之前一样, 借助于react-redux库进行连接使用

import React, { PureComponent } from 'react'import { connect } from 'react-redux'import { changeNumber } from '../store/features/counter'export class Home extends PureComponent { changeNumber(num) { this.props.changeNumber(num) } render() { const { counter } = this.props return ( <div> <h2>Home</h2> <h2>当前计数: {counter}</h2> <button onClick={() => this.changeNumber(5)}>+5</button> <button onClick={() => this.changeNumber(10)}>+10</button> </div> ) }}// 映射要使用的store中的数据const mapStateToProps = (state) => ({ counter: state.counter.counter})// 映射要派发的方法const mapDispatchToProps = (dispatch) => ({ changeNumber(num) { dispatch(changeNumber(num)) }})export default connect(mapStateToProps, mapDispatchToProps)(Home)
本文链接地址:https://www.jiuchutong.com/zhishi/298886.html 转载请保留说明!

上一篇:torch.cuda常用指令(torch.cuda.is_available())

下一篇:vue3 子组件上绑定(v-model=“xx“) 父组件传过来的值后报错(vue 绑定子组件属性)

  • iqoo8怎么投屏(iQOO8怎么投屏到电脑)

    iqoo8怎么投屏(iQOO8怎么投屏到电脑)

  • 云闪付红包怎么提现到卡里(云闪付红包怎么提现到微信)

    云闪付红包怎么提现到卡里(云闪付红包怎么提现到微信)

  • 搜狗拼音输入法的对号怎么打(搜狗拼音输入法打不出中文)

    搜狗拼音输入法的对号怎么打(搜狗拼音输入法打不出中文)

  • 抖音作品链接怎么复制(抖音作品链接怎么弄)

    抖音作品链接怎么复制(抖音作品链接怎么弄)

  • vip套餐信息获取失败怎么解决(vip套餐信息获取失败啦)

    vip套餐信息获取失败怎么解决(vip套餐信息获取失败啦)

  • airpodspro充电怎么不亮(airpodspro充电怎么样才算充满)

    airpodspro充电怎么不亮(airpodspro充电怎么样才算充满)

  • 华为芒果tv小窗口怎么设置(芒果tv 小窗)

    华为芒果tv小窗口怎么设置(芒果tv 小窗)

  • iphone6发热严重怎么办(iPhone6发热严重)

    iphone6发热严重怎么办(iPhone6发热严重)

  • 华为体验店可以免费贴膜吗(华为体验店可以修手机吗)

    华为体验店可以免费贴膜吗(华为体验店可以修手机吗)

  • 抖音里的回关怎么意思是什么(抖音里的回关怎么来的)

    抖音里的回关怎么意思是什么(抖音里的回关怎么来的)

  • amd r5 3600相当于英特尔什么处理器(amdr53600相当于i7几代)

    amd r5 3600相当于英特尔什么处理器(amdr53600相当于i7几代)

  • 戴尔电脑摄像头打不开怎么回事(戴尔电脑摄像头旁边的小孔是)

    戴尔电脑摄像头打不开怎么回事(戴尔电脑摄像头旁边的小孔是)

  • 笔记本wlan启用不了怎么办(笔记本wlan启用后又会自动禁用)

    笔记本wlan启用不了怎么办(笔记本wlan启用后又会自动禁用)

  • qq被注销的状态是什么样的(qq被注销了)

    qq被注销的状态是什么样的(qq被注销了)

  • 什么存储器存取周期最短(什么存储器存取速度最快)

    什么存储器存取周期最短(什么存储器存取速度最快)

  • 拼多多到货了会显示吗(拼多多到货了会怎么通知)

    拼多多到货了会显示吗(拼多多到货了会怎么通知)

  • 为什么iphone11微信没有信息提示(为什么iphone11微信通话不能退出通话界面)

    为什么iphone11微信没有信息提示(为什么iphone11微信通话不能退出通话界面)

  • ps怎么加水滴(ps水滴怎么制作)

    ps怎么加水滴(ps水滴怎么制作)

  • 苹果旁白模式怎么解锁(苹果旁白模式怎么解锁屏幕)

    苹果旁白模式怎么解锁(苹果旁白模式怎么解锁屏幕)

  • 微信聊天记录删除了还能查到吗(微信聊天记录删除了怎么恢复2023)

    微信聊天记录删除了还能查到吗(微信聊天记录删除了怎么恢复2023)

  • ipados正式版什么时候发布(ipados 版本)

    ipados正式版什么时候发布(ipados 版本)

  • 想删除微信好友怎么办(想删除微信好友但又碍于面子)

    想删除微信好友怎么办(想删除微信好友但又碍于面子)

  • xr改双卡稳定吗(xr改双卡信号稳定吗)

    xr改双卡稳定吗(xr改双卡信号稳定吗)

  • iphone8plus支持5g吗(iphone8plus支持5gwifi吗?)

    iphone8plus支持5g吗(iphone8plus支持5gwifi吗?)

  • 前程无忧如何注销账号(前程无忧如何注册个人账号)

    前程无忧如何注销账号(前程无忧如何注册个人账号)

  • neo.exe - neo是什么进程 有什么用(neo什么意思翻译成中文)

    neo.exe - neo是什么进程 有什么用(neo什么意思翻译成中文)

  • H5 video 自动播放(autoplay)不生效解决方案(h5能不能自动播放)

    H5 video 自动播放(autoplay)不生效解决方案(h5能不能自动播放)

  • java门面模式是什么(spring 门面模式)

    java门面模式是什么(spring 门面模式)

  • 出口退税免税政策
  • 个税全员全额扣缴申报指什么
  • 水费抵扣进项税税率是多少
  • 营业税金及附加包括增值税吗
  • 2019年计算机软件行业人均年工资
  • 物业管理水电费税率
  • 接受的捐赠收入要交税吗
  • 对公付款没有发票
  • 捐赠个人支出需要交纳个税吗?
  • 出口进项税额转出怎么做账务处理
  • 增值税发票开户行填简称是被允许的吗?
  • 市政配套费交给哪个部门
  • 旅游业要怎么进行差额征税处理
  • 房地产企业开发资质等级
  • 外汇收入会计分录
  • 存货盘亏应该计什么科目
  • 统一社会信用代码证
  • 旅游公司主营业务介绍
  • 贴息收据税前扣除是什么
  • 在Win10系统中卸载最近更新的补丁并重启电脑
  • TP-Link TL-WR841N管理员密码(初始密码)是多少
  • 税金及附加怎么登明细账
  • 脚手架属于什么费用
  • 人工费没有发票年度汇算调增需要进行调帐处理吗
  • win10记事本在哪找
  • 社保退回的工伤怎么赔偿
  • 员工宿舍中介费计入什么科目
  • 游戏出现d3d11lostdevice
  • php加入图片代码
  • 修改配置文件是什么意思
  • 工程建设质保金规定
  • 独资企业弥补亏损怎么办
  • 退货时会计分录的银行存款能是负数吗
  • 贴现会不会损害所有者权益
  • 高新技术企业研发费比例
  • 福利费需要缴税吗
  • 完美解决在ThinkPHP控制器中命名空间的问题
  • 以物易物双方做什么处理
  • 出售土地账务如何处理
  • macps字体怎么导入
  • 纳税人异地预缴所得税
  • 公章盖错在旁边加盖正确的说明
  • 税务稽查补税
  • 如何让网站优化成功
  • 开票品名不一样有什么关系
  • mongodb findandmodify
  • 设备安装工程验收规范
  • 已抵扣增值税进项税额
  • 公司购入车辆的增值税怎么算
  • 企业分红所得需要缴纳企业所得税吗
  • 小微企业增值税优惠政策最新2023
  • 公司基本户里的钱有利息吗
  • 以公司名义买500万的车省多少税
  • 销售货物增值税税率变化
  • 期末库存商品怎么结转
  • 经济补偿金如何做账
  • 专利补贴收入计入什么科目
  • 案例解析企业所需资金
  • mysql5.7.17 zip 解压安装详细过程
  • ubuntu磁盘空间突然满了
  • centos关闭kdump
  • win xp 虚拟内存
  • 两个linux系统之间如何传文件
  • js 列表
  • Python定时器实例代码
  • opengl怎么学
  • 全面了解中国历史英文
  • linux查看目录的权限的命令
  • Windows10下安装fastdfs
  • 怎么实现移动
  • jQuery 判断复选框是否选中
  • unity loom插件
  • Android调整按钮位置
  • 税控盘异常什么原因
  • 农产品进项税额核定扣除办法2019
  • 广西地方税务局决算公开表
  • 税务代办需要什么资料
  • 选矿比怎么算
  • 增值税借方有余额怎么调整
  • 什么是美国注册商标
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设