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文库