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

  • 怎样知道qq好友谁把你设成特别关心?(怎样知道QQ好友的位置)

    怎样知道qq好友谁把你设成特别关心?(怎样知道QQ好友的位置)

  • 哔哩哔哩连续包月怎么取消自动续费(哔哩哔哩连续包月怎么关)

    哔哩哔哩连续包月怎么取消自动续费(哔哩哔哩连续包月怎么关)

  • 微信深夜模式有什么用(设置深夜模式微信)

    微信深夜模式有什么用(设置深夜模式微信)

  • 红米手机来电不显示怎么办(红米手机来电不显示名字怎么回事)

    红米手机来电不显示怎么办(红米手机来电不显示名字怎么回事)

  • qq能发多大的压缩文件(扣扣可以发多大的压缩包)

    qq能发多大的压缩文件(扣扣可以发多大的压缩包)

  • 蓝牙耳机与有线耳机音质区别(蓝牙耳机与有线耳机哪个对耳朵好)

    蓝牙耳机与有线耳机音质区别(蓝牙耳机与有线耳机哪个对耳朵好)

  • ios13.4.1适合哪些机型(ios13.4好不好用)

    ios13.4.1适合哪些机型(ios13.4好不好用)

  • plc选型的主要依据(plc的选用原则是什么?)

    plc选型的主要依据(plc的选用原则是什么?)

  • word在中间加文字后面的就被覆盖了(word文档怎样在中间加一竖线)

    word在中间加文字后面的就被覆盖了(word文档怎样在中间加一竖线)

  • 电话手表没有网络怎么设置(手表电话怎么连接手机)

    电话手表没有网络怎么设置(手表电话怎么连接手机)

  • 微信视频听不到铃声(微信视频听不到铃声是怎么回事)

    微信视频听不到铃声(微信视频听不到铃声是怎么回事)

  • ipad激活和未激活区别是什么(ipad已激活和未激活)

    ipad激活和未激活区别是什么(ipad已激活和未激活)

  • 抖音上年龄计算器是什么软件(抖音最火计算年龄的程序)

    抖音上年龄计算器是什么软件(抖音最火计算年龄的程序)

  • 为什么微信收不到文件(为什么微信收不了红包和转账)

    为什么微信收不到文件(为什么微信收不了红包和转账)

  • 扣扣闪照怎么恢复(qq闪照怎么样恢复)

    扣扣闪照怎么恢复(qq闪照怎么样恢复)

  • 手机灯光有紫外线吗(手机紫外线灯有用吗)

    手机灯光有紫外线吗(手机紫外线灯有用吗)

  • icloud怎么降级(icloud怎么降级到免费无法点完成)

    icloud怎么降级(icloud怎么降级到免费无法点完成)

  • 手机陌生号码打不进来怎么办(手机陌生号码打不进来是什么原因)

    手机陌生号码打不进来怎么办(手机陌生号码打不进来是什么原因)

  • 手机qq怎么隐身在线(手机qq怎么隐身对某人可见)

    手机qq怎么隐身在线(手机qq怎么隐身对某人可见)

  • u盘中病毒了能插电脑吗(u盘中病毒能修好吗)

    u盘中病毒了能插电脑吗(u盘中病毒能修好吗)

  • 米兔定位电话怎么解绑(米兔定位电话怎么使用教程)

    米兔定位电话怎么解绑(米兔定位电话怎么使用教程)

  • oppo11听筒声音小怎么办(oppor11手机突然听筒声音小了怎么办)

    oppo11听筒声音小怎么办(oppor11手机突然听筒声音小了怎么办)

  • 苹果有单独显示器吗(苹果单独显示器在哪买)

    苹果有单独显示器吗(苹果单独显示器在哪买)

  • 探探好友恢复列表在哪(探探的好友怎么恢复)

    探探好友恢复列表在哪(探探的好友怎么恢复)

  • iphonexr双卡双待信号差怎么解决(iphonexr双卡双待打电话怎么切换)

    iphonexr双卡双待信号差怎么解决(iphonexr双卡双待打电话怎么切换)

  • 华为9.0.1怎么恢复旧版本(华为怎么恢复9.0系统)

    华为9.0.1怎么恢复旧版本(华为怎么恢复9.0系统)

  • 6个点税如何计算方法
  • 交通运输印花税怎么申报
  • 合同印花税怎么贴
  • 受托加工开票如何选名称
  • 软件使用权收入怎么计算
  • 建行网银转账复核流程
  • 非经营性资产包括哪些科目
  • 社保稽查公司提供不了会计分录怎么办
  • 以前年度损益调整借贷方向
  • 应交税费进项税额属于什么科目借贷方向
  • 行政单位无法支付怎么办
  • 原材料入库单运费要怎么计入?
  • 税务一般纳税人
  • 园林绿化苗木增值税抵扣税率是多少?
  • 2017年一般纳税人增值税优惠
  • 固定资产折旧计入成本还是费用
  • 季报是根据什么制定的
  • 火车票增值税什么意思
  • 电子发票截图可以吗
  • 自产货物用于捐赠的会计处理
  • 国外发票可以报销吗
  • 加计抵减是什么时候开始的
  • 企业发生的白条是什么
  • 即征即退的增值税计入其他收益吗
  • 跨年的所得税怎么冲
  • 长期待摊费用账务处理包括哪两部分
  • quicktimeplayer.exe - quicktimeplayer是什么进程 有什么用
  • 安装win7系统的硬件要求
  • php json转对象
  • 小规模纳税人购车是怎么抵税的
  • PQIBrowser.exe是什么进程 PQIBrowser进程查询
  • 兼职人员需要
  • 深究Python中的asyncio库-线程池
  • 建筑保温材料施工规范
  • 什么是进项税转出成本
  • 筹建期的费用计入什么科目
  • 织梦自适应模板怎么弄
  • 没有数字的公章有效吗
  • 现金日记账一般采用什么格式
  • 企业研发费用的优惠政策
  • 销项负数发票能作废吗
  • access 模糊匹配
  • Win7 32/64位系统下安装SQL2005和SP3补丁安装教程[图文]
  • 将MySQL help contents的内容有层次的输出方法推荐
  • 非独立核算门市部销售自产应税消费品
  • 外币支付账户
  • 创投收入
  • 开具红字发票如何做账?
  • 税务局手续费返还什么时间到账
  • 公司账户没有钱怎么发工资
  • 设备维保费如何计算
  • mysql中字符串类型
  • igfxsrvc module
  • 苹果官网
  • ssms.exe是什么进程
  • win10 rs1是什么版本
  • windowxp音量图标没了
  • win7系统怎样
  • lnmp一键安装包 linux
  • win8 休眠
  • jquery邮箱正则表达式
  • jquery prototype
  • jquery日程安排
  • windows下载安装
  • 安卓显示时间代码
  • 批处理应用实例
  • ftp下载工具能自动登录ftp服务器
  • jquery示例
  • nodejs的组成
  • 详解HTTPS 的原理和 NodeJS 的实现
  • 安卓全局替换
  • JavaScript中的事件处理
  • windows ipython
  • 安卓自定义app
  • 税务局怎么添加税种
  • 装卸搬运费属于
  • 合伙人转让出资的法律规定
  • 深圳北站哪里取纸质票
  • 2022年企业所得税税率2.5% 10% 25%
  • 打税务局电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设