React-Redux中dispatch未读取及props.SignIn非函数问题排查

问题1：'dispatch' is declared but its value is never read 警告 #

原因 #

SignInAPI返回的thunk函数声明了dispatch参数，但函数体内未使用它。同时原代码中Firebase登录方法名写错（应为小写开头的signInWithPopup，而非SignInWithPopup）。

修复代码 #

import { auth, provider } from "../firebase";
// 可选：定义登录成功的action type，用于后续状态更新
export const LOGIN_SUCCESS = "LOGIN_SUCCESS";

export function SignInAPI() {
  // 用_dispatch消除未使用参数警告，或后续使用dispatch发送action
  return (_dispatch) => {
    auth
      .signInWithPopup(provider)
      .then((payload) => {
        console.log(payload);
        // 示例：发送登录成功action到reducer
        // _dispatch({ type: LOGIN_SUCCESS, payload: payload.user });
      })
      .catch((error) => alert(error.message));
  };
}

问题2：props.SignIn不是函数 错误 #

原因 #

1. connect第二个参数中错误调用了SignInAPI()，应传入函数本身而非执行结果；
2. 组件内调用props.SignIn()，但connect定义的属性名是小写的signIn，大小写不匹配；
3. mapStateToProps原代码return;会返回undefined，触发Redux警告。

修复代码 #

修正Login.js末尾的connect配置及相关代码：

const mapStateToProps = (state) => {
  return {}; // 返回空对象避免Redux警告
};

// 方法1：对象简写（推荐）
export default connect(mapStateToProps, { SignIn: SignInAPI })(Login);

// 方法2：自定义mapDispatchToProps（如需扩展逻辑）
// const mapDispatchToProps = (dispatch) => ({
//   SignIn: () => dispatch(SignInAPI())
// });
// export default connect(mapStateToProps, mapDispatchToProps)(Login);

确保组件内调用保持一致：

<Google onClick={() => props.SignIn()}>
  <img src="images/google.svg" alt="google" />
  Sign in with Google
</Google>

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