React+Redux-Thunk v3.1.0登录注册遇action type未定义错误求解决

1. 核查Action Type常量的拼写与导入导出 #

• 确认auth.types.js中的常量正确导出，示例：

  // auth.types.js 正确写法
  export const LOGIN_REQUEST = 'LOGIN_REQUEST';
  export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
  export const LOGIN_FAILURE = 'LOGIN_FAILURE';
  

• 在Auth.action.js导入时避免拼写错误，比如不要把LOGIN_REQUEST写成LOGIN_REQUSET，同时区分默认导出和命名导出的用法。

2. 检查Action Creator的返回结构 #

• 同步Action必须返回包含type字段的对象：

  // 错误写法：缺少type字段
  export const loginRequest = () => {
    return {};
  }
  
  // 正确写法
  import { LOGIN_REQUEST } from './auth.types';
  export const loginRequest = () => {
    return {
      type: LOGIN_REQUEST
    };
  }
  

• 异步Thunk Action要确保内部dispatch的是合法Action对象，而非undefined或错误值：

  // 错误写法：dispatch了空内容
  export const login = (credentials) => async (dispatch) => {
    dispatch();
    try {
      const res = await api.login(credentials);
      dispatch({ type: LOGIN_SUCCESS, payload: res.data });
    } catch (err) {
      dispatch({ type: LOGIN_FAILURE, payload: err.message });
    }
  }
  
  // 正确写法
  export const login = (credentials) => async (dispatch) => {
    dispatch(loginRequest());
    try {
      const res = await api.login(credentials);
      dispatch({ type: LOGIN_SUCCESS, payload: res.data });
    } catch (err) {
      dispatch({ type: LOGIN_FAILURE, payload: err.message });
    }
  }
  

3. 适配Thunk v3.1.0的Store配置 #

Thunk v3.x的配置逻辑有调整，确保Store正确集成中间件：

// store.js 正确配置示例（Redux Toolkit方式）
import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import authReducer from './auth.reducer';

export const store = configureStore({
  reducer: {
    auth: authReducer
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk)
});

// 传统Redux方式配置
// import { createStore, applyMiddleware } from 'redux';
// export const store = createStore(authReducer, applyMiddleware(thunk));

如果遗漏Thunk中间件，异步Action无法被正确处理，会导致Redux收到函数而非带type的Action对象，触发错误。

4. 校验Login组件中Action的触发逻辑 #

在login.jsx的loginHandle中，确保通过useDispatch正确调用Action Creator：

// login.jsx 正确写法
import { useDispatch } from 'react-redux';
import { login } from './Auth.action';

const Login = () => {
  const dispatch = useDispatch();

  const loginHandle = async (e) => {
    e.preventDefault();
    const credentials = { /* 获取表单输入数据 */ };
    dispatch(login(credentials)); // 不要写成dispatch(login)，这会直接传递函数而非调用后的返回值
  };

  // ...组件其他逻辑
};

5. 检查Reducer中Action Type的匹配 #

确保Reducer中case匹配的常量和Action中使用的完全一致，比如不要在Reducer中写case 'LOGIN_REQ'，而Action里用的是LOGIN_REQUEST。

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