Redux Toolkit+TypeScript最佳实践

路上的追梦人

已于 2024-04-04 22:58:08 修改

阅读量1k

点赞数 7

CC 4.0 BY-SA版权

文章标签： typescript javascript 前端

于 2024-04-04 18:30:50 首次发布

本文链接：https://blog.csdn.net/Jiangtagong/article/details/137377692

这篇文章介绍了如何在React应用中使用Redux-Toolkit进行状态管理，包括创建切片(slices)、处理同步和异步操作，以及如何利用Typescript的类型安全特性。通过createSlice和extraReducers，它降低了复杂度并促进了代码结构的规范和解耦。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 =