当前位置: 首页 > news >正文

Redux Toolkit+TypeScript最佳实践

Redux-Toolkit是为了简化使用Redux繁琐的步骤,可以j降低使用useReducer与useContext管理状态的频率,而且起到项目中状态管理规范和约束化的效果。

阅读本文需要的前置知识:React、Redux、Typescript、Redux hooks。

Redux-Toolkit使用步骤

目前使用Redux-Toolkit管理消费redux状态的方式。举个例子,假设我们现在的业务和银行转账有关,有两个状态存在redux,分别为银行账号和金额:accountOfBank和amountOfBank,使用createSlice来创建reducer和actions:

首先安装redux-toolkit依赖包,

npm i @reduxjs/toolkit

npm i react-redux

文件目录

slice.ts

创建切片,声明存储状态对象以及action。createSlice创建一个切片(slice),主要参数:

  • name:slice的标识,在redux-devtool中会显示对应的名字;
  • initialState:初始值,对象;
  • reducers:对象类型以及函数类型(函数参数:state和传递的action参数);
  • extraReducers:用于处理异步,比如网络请求等;

creactSlice返回值是一个对象,包含所有的actions。 

import { createSlice, PayloadAction } from '@reduxjs/toolkit';type InitialState = {accountOfBank: string,amountOfBank: string
}const initialState: InitialState = {accountOfBank: 'JanPan Bank',amountOfBank: '1000'
}const slice = createSlice({name: 'bank',initialState,reducers: {updateBankAccount: (state: InitialState, action: PayloadAction<string>) => {state.accountOfBank = action.payload;},updateBankAmount: (state: InitialState, action: PayloadAction<string>) => {state.amountOfBank = action.payload;}}
})export const {updateBankAccount, updateBankAmount} = slice.actions;
export default slice.reducer;

 store.ts

存在在store中,configureStore是Redux-Tookit的一个工厂函数,用于创建Redux-Store。

store是通过传入一个reducer(缩减器)来创建的,并通过getState的方法,用于返回当前的状态值,在Typescript强类型声明中有很大的帮助。

configureStore主要参数,

  • reducer:将slice的reducer传入;
  • middleware:中间件;
  • devTools:是否配置devTools工具,默认为true;
import { configureStore } from "@reduxjs/toolkit";
import slice from './slice';export const store = configureStore({reducer: {bank: slice}
})export type BankState = ReturnType<typeof store.getState>;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from "react-redux";
import { store } from "./toolkit/store";
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement
);
root.render(<Provider store={store}><App /></Provider>
);

BankView.tsx

页面UI组件渲染,useSelector获取当前管理的state,state的类型可通过store.ts的getState获取,

并且将配置在store的reducer提取解构。

import { useDispatch, useSelector } from "react-redux";
import { BankState } from "../../toolkit/store";
import { updateBankAccount, updateBankAmount } from "../../toolkit/slice";export const BankView = () => {const {accountOfBank, amountOfBank} = useSelector((state: BankState) => state.bank)const dispatch = useDispatch();return (<div><h3>accountOfBank - {accountOfBank}</h3><h3>amountBank - {amountOfBank}</h3><button onClick={() => dispatch(updateBankAccount('England'))}>change bank account</button><span>  </span><button onClick={() => dispatch(updateBankAmount('2000'))}>change bank amount</button></div>)
}

详细目录截图如下,

经过上面简单的封装就实现了全局状态管理,使用简单高效,而且可以实现业务与UI的解耦。

在网络请求等情况通常需要异常更新、提交数据等,可通过createAynceThunk实现,

import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';type InitialState = {accountOfBank: string,amountOfBank: string,creatTime: string
}const initialState: InitialState = {accountOfBank: 'JanPan Bank',amountOfBank: '1000',creatTime: '2024-04-02'
}export const fetchAccountBank = createAsyncThunk('https://wwww.baidu.com',() => {return new Promise<string>(resolve => {let timeId = setTimeout(() => {clearTimeout(timeId);resolve('2024-04-03');}, 1000)})})const slice = createSlice({name: 'bank',initialState,reducers: {updateBankAccount: (state: InitialState, action: PayloadAction<string>) => {state.accountOfBank = action.payload;},updateBankAmount: (state: InitialState, action: PayloadAction<string>) => {state.amountOfBank = action.payload;}},extraReducers: (builder) => {builder.addCase(fetchAccountBank.pending, (state: InitialState) => {console.log('fetchAccountBank pending')state.creatTime = 'loading...'});builder.addCase(fetchAccountBank.fulfilled, (state, action) => {console.log(action.payload)state.creatTime = action.payload;console.log('fetchAccountBank fulfilled')});builder.addCase(fetchAccountBank.rejected, (state) => {console.log('fetchAccountBank rejected')state.creatTime = 'failed...'})}
})export const {updateBankAccount, updateBankAmount,} = slice.actions;
export default slice.reducer;

因为Typescript语言有较强的类型校验,在异步时dispatch报错,如下

只需在使用useDispatch时,声明泛型类型即可。

    // 异步需声明useDispatch类型const asyncDispatch = useDispatch<AppDispatch>();

最佳实践全部代码如下:

ReduxToolkit+TypeScript最佳实践资源-CSDN文库

相关文章:

Redux Toolkit+TypeScript最佳实践

Redux-Toolkit是为了简化使用Redux繁琐的步骤&#xff0c;可以j降低使用useReducer与useContext管理状态的频率&#xff0c;而且起到项目中状态管理规范和约束化的效果。 阅读本文需要的前置知识&#xff1a;React、Redux、Typescript、Redux hooks。 Redux-Toolkit使用步骤 …...

假期别闲着:REST API实战演练之创建Rest API

1、创建实体类&#xff0c;模拟实体对象 创建一个类&#xff0c;模拟数据数据库来存储数据&#xff0c;这个类就叫Person。 其代码如下&#xff1a; package com.restful;public class Person {private String name;private String about;private int birthYear;public Perso…...

C++模仿qq界面

#include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent) {//设置窗口的大小this->resize(645,497);//设置窗口名字this->setWindowTitle("QQ");//设置窗口图标this->setWindowIcon(QIcon("C:\\zhouzhouMyfile\\qt_proj…...

3D模型在线轻量化工具

在计算机图形学领域&#xff0c;3D模型简化工具是一种强大的工具&#xff0c;用于减少模型的面数&#xff0c;以提高模型在渲染和处理过程中的性能。本文将全面介绍为何需要简化模型、简化的方法、常见的简化算法以及一款三维模型优化产品 的使用方法&#xff0c;帮助读者更好地…...

去中心化社交媒体:分析 Facebook 在区块链平台上的角色

在当今数字时代&#xff0c;社交媒体已经成为人们日常生活中不可或缺的一部分。然而&#xff0c;随着人们对数据隐私和信息控制的关注不断增加&#xff0c;传统的中心化社交媒体平台也面临着越来越多的质疑和挑战。为了应对这些挑战&#xff0c;越来越多的人开始探索去中心化社…...

实现多租户JAVA支付(微信拉起支付):一个简单而强大的解决方案

简介&#xff1a; 本篇文章为多租户场景 在当今数字经济时代&#xff0c;许多企业都面临着处理多租户支付的挑战。多租户系统是指一种架构&#xff0c;其中单个实例的软件服务多个租户&#xff0c;每个租户的数据通常被隔离&#xff0c;以确保安全性和数据隐私。而在这种环境…...

万字长文:FineBI面试题及参考答案详解

1:FineBI的基本概念是什么? FineBI是帆软软件有限公司推出的一款商业智能产品。它的核心功能是通过分析企业已有的信息化数据,帮助企业发现并解决存在的问题,预测模拟企业将来的发展,并协助企业及时调整策略做出更好的决策,增强企业的可持续竞争性。 2:描述FineBI的使…...

Python爬虫:为什么你爬取不到网页数据

目录 前言 一、网络请求被拒绝 二、数据是通过JavaScript加载的 三、需要进行登录 四、网站反爬虫策略 五、网站结构变更 总结 前言 作为一名开发者&#xff0c;使用Python编写爬虫程序是一项常见的任务。爬虫程序的目的是收集互联网上的数据&#xff0c;并将其保存或使…...

NLP在搜索召回领域中的应用场景

自然语言处理&#xff08;NLP&#xff09;在搜索召回领域中的应用场景非常广泛&#xff0c;它通过理解和分析人类语言&#xff0c;提高了信息检索的准确性和效率。以下是一些具体的应用场景&#xff1a; 1. 搜索引擎优化 NLP技术可以用于优化搜索引擎的查询处理&#xff0c;通…...

2. Django配置信息

第2章 Django配置信息 Django的配置文件settings.py用于配置整个网站的环境和功能, 核心配置必须有项目路径, 密钥配置, 域名访问权限, App列表, 中间件, 资源文件, 模板配置, 数据库的连接方式.* 项目运行时, 如果修改代码, 项目会自动检测发现改动后会重新运行, 除非报错否…...

【Web】纯萌新的BUUCTF刷题日记Day1

目录 [RoarCTF 2019]Easy Java [网鼎杯 2018]Fakebook [CISCN2019 华北赛区 Day2 Web1]Hack World [BJDCTF2020]The mystery of ip [网鼎杯 2020 朱雀组]phpweb [BSidesCF 2020]Had a bad day [BJDCTF2020]ZJCTF&#xff0c;不过如此 [BUUCTF 2018]Online Tool [GXYCTF…...

【51单片机入门记录】RTC(实时时钟)-DS1302概述

目录 一、基于三线通信的RTC-DS1302 &#xff08;1&#xff09;简介 &#xff08;2&#xff09;特性 &#xff08;3&#xff09;引脚介绍 &#xff08;4&#xff09;控制字的格式 &#xff08;5.0&#xff09;日历时钟寄存器介绍 &#xff08;5.1&#xff09;日历时钟寄存…...

Lua热更新(AssetBundle)

AssetBundle 新版本导入ab包报错,则删除其中的Tests文件夹。 给资源分组 打包设置:平台、路径、重复打包清空文件夹、复制到streaming文件夹 建议勾选 建议使用LZ4压缩方式 用来观察文件中的包大小,不常用 参数总结: 这六个只做了解,重要的是上面的...

互联网人才现状分析

作者&#xff1a;哈哥撩编程&#xff08;视频号、抖音、公众号同名&#xff09; 新星计划全栈领域优秀创作者博客专家全国博客之星第四名超级个体COC上海社区主理人特约讲师谷歌亚马逊演讲嘉宾科技博主极星会首批签约作者 &#x1f3c6; 推荐专栏&#xff1a; &#x1f3c5;…...

高级IO——多路转接

高级IO——五种IO模型 首先我们之前在基础IO部分就学过IO的过程分等待过程和读写过程&#xff01; 比如我们的scanf除了从键盘缓冲区读取数据所花的时间&#xff0c;主要的时间花费放在了等你输入的过程&#xff01; 所以我们如果想提高我们的IO效率&#xff0c;我们除了要缩…...

TypeScript常用知识点整理

介绍 TypeScript 是 JavaScript 的一个超集&#xff0c;添加了静态类型支持和更多现代编程特性&#xff0c;提高了代码的可靠性和可维护性。最终会被编译成标准的 JavaScript 代码运行。 使用npm install -g typescript进行全局安装 将编写好的ts代码进行运行&#xff0c;第…...

【Unity实战100例】Unity入门小地图位置同步(第一第三人称)

unity小地图制作包括第一人称控制器和第三人称控制器 目录 一.选择合适自身的人称控制器 二.小地图制作...

蓝桥杯简单模板

目录 最大公约数 两个数的最大公约数 多个数的最大公约数 最小公倍数 两个数的最小公倍数 多个数的最小公倍数 素数 ​编辑 位数分离 正写 ​编辑 反写 闰年 最大公约数 两个数的最大公约数 之前看见的是辗转相除法&#xff0c;例如现在让算一个49&#xff0c;21…...

单例模式(饿汉模型,懒汉模型)

在着里我们先了解什么是单例模式。 就是某个类在进程中只能有单个实例&#xff0c;这里的单例模式需要一定的编程技巧&#xff0c;做出限制&#xff0c;一旦程序写的有问题&#xff0c;创建了多个实例&#xff0c;编程就会报错。 如果我们学会了单例模式&#xff0c;这种模式…...

torchvision中的数据集使用

torchvision中的数据集使用 使用和下载CIFAR10数据集 输出测试集中的第一个元素&#xff08;输出img信息和target&#xff09; 查看分类classes 打断点–>右键Debug–>找到classes 代码 import torchvisiontrain_set torchvision.datasets.CIFAR10(root"./data…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...