位置: 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 绑定子组件属性)

  • 做推广时,如何做到系统化的思考和节奏化的管控?(如果做推广)

    做推广时,如何做到系统化的思考和节奏化的管控?(如果做推广)

  • 抖音怎么看自己有多少个作品(抖音怎么看自己@别人的信息)

    抖音怎么看自己有多少个作品(抖音怎么看自己@别人的信息)

  • 淘宝宝贝详情页在哪里(淘宝宝贝详情页一键生成软件)

    淘宝宝贝详情页在哪里(淘宝宝贝详情页一键生成软件)

  • 手机防抖功能怎么打开(手机防抖模式在哪里)

    手机防抖功能怎么打开(手机防抖模式在哪里)

  • 键盘音效怎么设置(键盘音效怎么设置小米)

    键盘音效怎么设置(键盘音效怎么设置小米)

  • 电脑怎么下载2007版cad(电脑怎么下载2003)

    电脑怎么下载2007版cad(电脑怎么下载2003)

  • x470和x570区别(x470与x570区别)

    x470和x570区别(x470与x570区别)

  • 苹果11多少hz刷新率(苹果11多少刷新)

    苹果11多少hz刷新率(苹果11多少刷新)

  • 抖音里的烟雾视频是怎么做出来的(抖音视频烟雾)

    抖音里的烟雾视频是怎么做出来的(抖音视频烟雾)

  • 拼多多分时折扣什么意思(拼多多怎么领优惠券?)

    拼多多分时折扣什么意思(拼多多怎么领优惠券?)

  • wps怎么搜关键词(wps在哪搜索关键词)

    wps怎么搜关键词(wps在哪搜索关键词)

  • 关系数据语言的共同特征有哪些(关系数据语言的共同特点)

    关系数据语言的共同特征有哪些(关系数据语言的共同特点)

  • 抖音发送验证码频繁什么意思(抖音发送验证码频繁多长时间解除)

    抖音发送验证码频繁什么意思(抖音发送验证码频繁多长时间解除)

  • 苹果手机微信发不了图片是怎么回事(苹果手机微信发消息怎么换行)

    苹果手机微信发不了图片是怎么回事(苹果手机微信发消息怎么换行)

  • 天猫魔盒怎么投影(天猫魔盒怎么投屏不了)

    天猫魔盒怎么投影(天猫魔盒怎么投屏不了)

  • 小米音箱如何关机(小米音箱如何关闭整点报时)

    小米音箱如何关机(小米音箱如何关闭整点报时)

  • 微信关闭自启动省电吗(微信关闭自启动能收到消息吗)

    微信关闭自启动省电吗(微信关闭自启动能收到消息吗)

  • qq语音消息自动转文字(qq语音消息自动转文字为什么要钱)

    qq语音消息自动转文字(qq语音消息自动转文字为什么要钱)

  • 知乎怎么解绑手机号(知乎怎么解绑手机号码绑定)

    知乎怎么解绑手机号(知乎怎么解绑手机号码绑定)

  • 淘宝搜索复兴大道是什么(淘宝搜索复兴大道)

    淘宝搜索复兴大道是什么(淘宝搜索复兴大道)

  • 内存插在主板哪个地方(内存插在主板哪个接口)

    内存插在主板哪个地方(内存插在主板哪个接口)

  • 荣耀手环5怎么连接手机(荣耀手环5怎么充电)

    荣耀手环5怎么连接手机(荣耀手环5怎么充电)

  • 华为mate30与p30对比(华为mate30跟p30)

    华为mate30与p30对比(华为mate30跟p30)

  • 华为5ipro上市时间(华为5ipro是5g手机吗)

    华为5ipro上市时间(华为5ipro是5g手机吗)

  • vivoy93有语音助手吗(vivoy93手机的语音助手怎么喊才会跳出来)

    vivoy93有语音助手吗(vivoy93手机的语音助手怎么喊才会跳出来)

  • 电脑双屏互不干扰怎么设置(电脑双屏互不影响)

    电脑双屏互不干扰怎么设置(电脑双屏互不影响)

  • 自然人收缴税务客户端
  • 适用综合所得税率表
  • 金融企业 税
  • 培训费的其他费用是什么
  • 注销股本对所有股票影响
  • 办公室转租怎么给对方开发票
  • 利润率多少才是正常的
  • 房地产企业土地使用税
  • 长期股权投资属于金融资产吗
  • 产权转让与股权转让
  • 企业咨询评估
  • 购买脚手架报价单
  • 其他应付款变动率公式
  • 退预付账款会计分录
  • 建筑工程劳务承包
  • 处置交易性金融资产发生的交易费用
  • 企业相互之间借款合法吗
  • 贸易公司一般纳税多少
  • 企业资产损失会计处理
  • 新注册公司季度资产为零
  • 管理会计完全成本法和变动成本法例题
  • 微软官方教你如何验机
  • win11windows安全中心打不开
  • 在线测网速准吗
  • 利润分配怎么核算
  • 购买树苗计入会计科目吗
  • 纳税人外购下列已税消费品
  • 商标注册费用
  • u盘一键启动安装系统
  • ccc.exe是什么进程
  • 汽车维修的发票的购买方
  • PHP:session_commit()的用法_Session函数
  • puppetm
  • 跨境服务免征增值税需要一直备案吗
  • 红字发票怎么填申报表表二
  • 什么情况借钱
  • chatGPT之Python API启用上下文管理
  • nyud数据集
  • trace命令详解
  • php接口开发详解
  • thinkphp withjoin
  • php字符串处理函数有哪些
  • 小微企业免征增值税报表填写
  • 食堂增值服务有哪些
  • 一般纳税人只有进项怎么报税
  • wordpress配置数据库
  • 企业资本包括
  • 材料采购账务处理思维图怎么做
  • 购买旧固定资产入账
  • sqlserver数据库提示授权过期
  • 个人所得税的征收
  • 发票冲红重开,重开时是按新税率还是旧税率?
  • 资产负债表日后非调整事项应当在附注中披露
  • 无形资产摊销账面价值
  • 应交税费应交增值税借贷方向
  • 质量问题举例
  • 现代服务业包括哪些项目
  • 航天金税税控盘服务电话
  • 汽车贷款利息计算公式计算器
  • centos7.6 yum源
  • windows更新9%
  • winxp设置在哪
  • linux如何释放内存空间
  • linux系统的配置
  • javascript Ext JS 状态默认存储时间
  • jquery滑动触发事件
  • qat开发
  • css网站布局实录 pdf
  • jquery日程安排
  • Node.js中的事件循环是什么意思
  • linux文件inode详解
  • android加载gif图片
  • android 4.2
  • 税务协查函回复的内容有哪些
  • 代理记账公司自查自纠情况报告范文
  • 电子税务局政策速递
  • 教师票优惠需要交税吗
  • 企业所得税年度申报时间
  • 该纳税人还未申报,请申报成功后
  • 耕地占用税和契税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设