Redux Toolkit中dispatch返回值的类型定义问题求助

核心思路 #

Redux Toolkit中dispatch的返回值类型分两种情况，对应同步/异步action，直接基于action本身的类型来定义回调参数即可：

1. 同步Action的场景（对应CRA-Redux模板默认的counter示例） #

假设你使用模板里的同步increment action，直接用ReturnType<typeof 你的Action>作为回调参数类型：

子组件（Counter.tsx）代码

import { useDispatch } from 'react-redux';
import { increment } from './counterSlice';

// 定义父组件传入的回调类型
interface CounterProps {
  onDispatchResult: (result: ReturnType<typeof increment>) => void;
}

export const Counter = ({ onDispatchResult }: CounterProps) => {
  const dispatch = useDispatch();

  const handleIncrement = () => {
    const result = dispatch(increment());
    // 将dispatch结果传给父组件
    onDispatchResult(result);
  };

  return (
    <div>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

父组件使用示例

import { Counter } from './features/counter/Counter';

const ParentComponent = () => {
  const handleResult = (result) => {
    // TypeScript会自动推断result类型为{ type: 'counter/increment' }
    console.log('同步dispatch结果:', result);
  };

  return <Counter onDispatchResult={handleResult} />;
};

2. 异步Action的场景（基于createAsyncThunk创建的action） #

如果是异步action，dispatch会返回一个Promise，await后得到的是异步action的完成/失败状态对象，用Redux Toolkit提供的AsyncThunkFulfilledAction和AsyncThunkRejectedAction来定义类型：

第一步：先定义异步action（counterSlice.ts）

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// 创建异步action
export const incrementAsync = createAsyncThunk(
  'counter/incrementAsync',
  async (amount: number) => {
    await new Promise(resolve => setTimeout(resolve, 1000));
    return amount;
  }
);

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(incrementAsync.fulfilled, (state, action) => {
      state.value += action.payload;
    });
  },
});

export default counterSlice.reducer;

第二步：子组件中定义回调类型

import { useDispatch } from 'react-redux';
import { incrementAsync } from './counterSlice';
import { AsyncThunkFulfilledAction, AsyncThunkRejectedAction } from '@reduxjs/toolkit';
import { AppDispatch } from '../../app/store'; // 从store导出通用dispatch类型

interface CounterProps {
  onAsyncDispatchResult: (result: AsyncThunkFulfilledAction<number> | AsyncThunkRejectedAction) => void;
}

export const Counter = ({ onAsyncDispatchResult }: CounterProps) => {
  // 使用AppDispatch确保dispatch类型正确
  const dispatch = useDispatch<AppDispatch>();

  const handleIncrementAsync = async () => {
    try {
      const result = await dispatch(incrementAsync(5));
      onAsyncDispatchResult(result);
    } catch (err) {
      console.error('异步dispatch失败:', err);
    }
  };

  return (
    <button onClick={handleIncrementAsync}>Increment Async</button>
  );
};

补充：通用Dispatch类型导出（app/store.ts） #

为了避免重复定义dispatch类型，建议从store中导出通用的AppDispatch：

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

// 导出通用dispatch类型
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;

内容的提问来源于stack exchange，提问作者J. Doe