能否在Redux Toolkit的createAsyncThunk中提取重复代码至独立函数？

应用结构示例 #

• entities/user/services/checkAuth
• features/auth-user/services/login（包含注册、登出、刷新逻辑）

原始服务示例 #

服务示例1（刷新Token） #

export const refreshService = createAsyncThunk<void>(
    'auth-user/refreshService',
    async (_, thunkAPI) => {
        try {
            const response = await axios.get<AuthResponse>('http://localhost:4000/api/refresh', { withCredentials: true })
            const { tokens, user } = response.data

            thunkAPI.dispatch(userActions.setData(user))
            thunkAPI.dispatch(userActions.authorize())
            localStorage.setItem(USER_ACCESS_TOKEN, tokens.accessToken)
        }
        catch (error) {
            ...
        }
    },
)

服务示例2（用户注册） #

export const registrationService = createAsyncThunk<UserEntity, RegistrationRequest>(
    'auth-user/registrationService',
    async (data, thunkAPI) => {
        try {
            const response = await axios.post<AuthResponse>('http://localhost:4000/api/registration', data)

            if (!response.data) {
                throw new Error()
            }

            const { user, tokens } = response.data

            thunkAPI.dispatch(userActions.setData(user))
            thunkAPI.dispatch(userActions.authorize())
            localStorage.setItem(USER_ACCESS_TOKEN, tokens.accessToken)

            return user
        }
        catch (error) {
            ...
        }
    },
)

重复代码段 #

以下逻辑在多个认证相关的Thunk中重复出现：

thunkAPI.dispatch(userActions.setData(user))
thunkAPI.dispatch(userActions.authorize())
localStorage.setItem(USER_ACCESS_TOKEN, tokens.accessToken)

复用方案 #

完全可以复用，最直接高效的方式是把这段重复逻辑提取为公共工具函数，在需要的Thunk中直接调用：

1. 提取公共处理函数 #

创建一个公共工具文件（比如features/auth-user/utils/authHandlers.ts），封装认证成功后的统一逻辑：

import { ThunkDispatch } from '@reduxjs/toolkit';
import { RootState } from '../../../store'; // 导入你的RootState类型
import { userActions } from '../../../entities/user/slice'; // 导入user切片的actions
import { USER_ACCESS_TOKEN } from '../constants'; // 导入Token存储常量

// 根据实际业务定义参数类型
type AuthSuccessParams = {
  thunkAPI: { dispatch: ThunkDispatch<RootState, unknown, any> };
  user: UserEntity;
  tokens: { accessToken: string };
};

export const handleAuthSuccess = ({ thunkAPI, user, tokens }: AuthSuccessParams) => {
  thunkAPI.dispatch(userActions.setData(user));
  thunkAPI.dispatch(userActions.authorize());
  localStorage.setItem(USER_ACCESS_TOKEN, tokens.accessToken);
};

2. 在Thunk中调用公共函数 #

修改原有Thunk，用函数调用替换重复代码：

刷新服务修改后

import { handleAuthSuccess } from '../utils/authHandlers';

export const refreshService = createAsyncThunk<void>(
    'auth-user/refreshService',
    async (_, thunkAPI) => {
        try {
            const response = await axios.get<AuthResponse>('http://localhost:4000/api/refresh', { withCredentials: true })
            const { tokens, user } = response.data

            // 调用公共逻辑
            handleAuthSuccess({ thunkAPI, user, tokens });
        }
        catch (error) {
            ...
        }
    },
)

注册服务修改后

import { handleAuthSuccess } from '../utils/authHandlers';

export const registrationService = createAsyncThunk<UserEntity, RegistrationRequest>(
    'auth-user/registrationService',
    async (data, thunkAPI) => {
        try {
            const response = await axios.post<AuthResponse>('http://localhost:4000/api/registration', data)

            if (!response.data) {
                throw new Error()
            }

            const { user, tokens } = response.data

            // 调用公共逻辑
            handleAuthSuccess({ thunkAPI, user, tokens });

            return user
        }
        catch (error) {
            ...
        }
    },
)

额外说明 #

后续如果需要调整认证成功的逻辑（比如新增Token过期时间存储、添加埋点事件等），只需要修改handleAuthSuccess这一个函数，所有调用它的Thunk都会自动同步更新，大幅提升代码的可维护性。

内容的提问来源于stack exchange，提问作者Default