Redux Toolkit异步函数TypeScript错误及组件调用问题求助

1. TypeScript类型错误（Stock.store.ts中asyncIncrement的类型问题） #

原因分析 #

你手动定义的AppThunk类型与AppDispatch不兼容：ThunkAction的第四个参数指定为Action<string>，但Redux Toolkit生成的action是包含payload、type等属性的增强型action，并非单纯的Action<string>。同时configureStore已自动集成Thunk中间件，AppDispatch类型本身就支持处理thunk函数，无需手动定义AppThunk约束返回类型。

解决方案 #

有两种可选方案：

方案一：移除手动类型约束，让TypeScript自动推断

修改Stock.store.ts中的asyncIncrement函数，无需指定返回类型：

export function asyncIncrement() {
  return async function (dispatch: AppDispatch) {
    await sleep(3000);
    dispatch(increment());
  };
}

或更简洁的箭头函数写法：

export const asyncIncrement = () => async (dispatch: AppDispatch) => {
  await sleep(3000);
  dispatch(increment());
};

方案二：使用Redux Toolkit官方推荐的createAsyncThunk（更严谨）

这种写法无需手动处理Thunk类型，还能统一管理异步状态：

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

// 定义异步thunk
export const asyncIncrement = createAsyncThunk(
  'stock/asyncIncrement',
  async () => {
    await sleep(3000);
  }
);

const stock = createSlice({
  name: 'stock',
  initialState: {
    counter: 0,
  },
  reducers: {
    increment(state) {
      state.counter += 1;
    },
    decrement(state) {
      state.counter -= 1;
    },
  },
  // 处理异步thunk完成后的状态更新
  extraReducers: (builder) => {
    builder.addCase(asyncIncrement.fulfilled, (state) => {
      state.counter += 1;
    });
  },
});

export const { increment, decrement } = stock.actions;
export default stock.reducer;

2. 组件调用异步函数的异常问题 #

原因分析 #

大概率是两个问题导致：

1. 组件中使用了普通的useDispatch而非自定义的useAppDispatch，普通useDispatch的类型不支持处理thunk函数；
2. Provider仅在用户认证后包裹Main组件，若在未认证路由中调用Redux方法，会出现无法获取store的错误。

解决方案 #

• 使用正确的dispatch钩子：在组件中必须用useAppDispatch获取支持thunk的dispatch实例：

  import { useAppDispatch } from './redux';
  import { asyncIncrement } from './redux/Stock.store';
  
  function YourComponent() {
    const dispatch = useAppDispatch();
  
    const handleAsyncIncrement = () => {
      dispatch(asyncIncrement());
    };
  
    return <button onClick={handleAsyncIncrement}>异步加1</button>;
  }
  

• 调整Provider的全局位置：将Provider提升到所有需要使用Redux的组件外层，避免只有认证后才能访问store：

  export default function App() {
    return (
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          {!isAuthenticated ? (
            <NavigationContainer>
              <AuthRoutes></AuthRoutes>
            </NavigationContainer>
          ) : (
            <Main />
          )}
        </ThemeProvider>
      </Provider>
    );
  }
  

内容的提问来源于stack exchange，提问作者Nilton Schumacher F