React-Redux调用action报错：sendLoginRequest不是函数

以下是针对该错误的核心排查与解决步骤：

1. 校验Action创建函数的导出与引入匹配 #

• 检查Login.Action.js中sendLoginRequest的导出方式：
  • 若为命名导出：

    // Login.Action.js
    export const sendLoginRequest = (credentials) => async (dispatch) => {
      // 登录请求逻辑
    }
    

    组件中需对应使用命名引入，并在mapDispatchToProps中正确绑定：

    // Login组件
    import { sendLoginRequest } from './Login.Action';
    
    const mapDispatchToProps = {
      sendLoginRequest // 对象简写自动绑定dispatch
    };
    

  • 若为默认导出：

    // Login.Action.js
    export default (credentials) => async (dispatch) => {
      // 登录请求逻辑
    }
    

    组件中需使用默认引入：

    import sendLoginRequest from './Login.Action';
    

2. 确认connect的参数顺序正确性 #

connect的参数顺序为mapStateToProps, mapDispatchToProps，不要颠倒顺序：

// 正确写法（无mapState时第一个参数传null）
export default connect(null, mapDispatchToProps)(Login);

// 有mapState的场景
export default connect(mapStateToProps, mapDispatchToProps)(Login);

若颠倒参数，组件接收到的sendLoginRequest会是state而非绑定后的函数。

3. 组件内正确调用props中的action函数 #

• 类组件需通过this.props.sendLoginRequest调用：

  handleLogin = async () => {
    await this.props.sendLoginRequest(this.state.loginForm);
  }
  

• 函数组件需通过解构后的props调用：

  const Login = ({ sendLoginRequest }) => {
    const handleLogin = async () => {
      await sendLoginRequest(formData);
    };
    // ...
  }
  

4. 检查Redux中间件配置（针对异步Action） #

如果sendLoginRequest是异步Action（使用redux-thunk），确保store已配置thunk中间件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

缺少thunk会导致异步Action无法被正确处理，传递到组件的可能不是函数。

5. 排查拼写与大小写错误 #

确认sendLoginRequest的名称在导出、引入、connect绑定、组件调用环节完全一致，大小写、拼写错误是常见诱因。

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