reactjs - 我无法通过 mapDispatchToProps 传递道具

Question

我正在尝试通过 mapDispatchToPropsm 将操作传递给我的组件，但它一直告诉我该操作不是函数。我也尝试将 doGoogleLoginAction 对象直接传递给连接，但它也不起作用。我猜这个动作本身有问题，但我没有看到它是什么。当我单击 LoginPage.js 中的 iniciar 按钮时触发问题

这是 userReducer.js：

//PATRON DE DISEÑO REDUX DUCK
import { loginWithGoogle } from "../firebase";

const initialState = {
  loggedIn: false,
  fetching: false
};

//---CONSTANTS----
const LOGIN = "LOGIN";
const LOGIN_SUCCESS = "LOGIN_SUCCESS";
const LOGIN_ERROR = "LOGIN_ERROR";

//---REDUCERS---
export default function reducer(state = initialState, action) {
  switch (action.type) {
    case "LOGIN":
      return { ...state, fetching: true };
    case "LOGIN_ERROR":
      return { ...state, fetching: false, error: action.payload };
    case "LOGIN_SUCCESS":
      return { ...state, fetching: false, ...action.payload };
    default:
      return state;
  }
} //el reducer esta siempre escuchando hasta que hagas una accion que coincida con las definidas

//---ACTIONS---
export const doGoogleLoginAction = () => (dispatch, getState) => {
  dispatch({
    type: LOGIN
  });
  return loginWithGoogle() //this is the function defined in firebase.js which lets me do the google Login and returns a promise
    .then(user => {
      dispatch({
        type: LOGIN_SUCCESS,
        payload: { ...user } //we send a new copy of user
      });
      saveStorage(getState());
    })
    .catch(err => dispatch({ type: LOGIN_ERROR, payload: err.message }));
}; //it returns the data from the user

//---UTILS---
const saveStorage = storage => {
  //we save the state in the localstorage
  localStorage.storage = JSON.stringify(storage);
};

这是我的组件 LoginPage.js：

import React from "react";
import styles from "./login.module.css";
import { connect } from "react-redux";
import { doGoogleLoginAction } from "../../redux/userReducer";

function LoginPage(fetching, googleLogin) {
    
  function doLogin() {
    googleLogin();
  }

//   if (fetching) return <h2>Loading</h2>;

  return (
    <div className={styles.container}>
      <h1>Inicia Sesión con Google</h1>
      <h1>Cierra tu sesión</h1>
      <button onClick={doLogin}>Iniciar</button>
      <button>Cerrar Sesión</button>
    </div>
  );
}
const mapStateToProps = ({ user: { fetching } }) => {
  //we take the state.user.fetching from the store and we return it
  return { fetching };
};

const mapDispatchToProps = {
  googleLogin: doGoogleLoginAction
};

export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);

和输出：

LoginPage.js:9 Uncaught TypeError: googleLogin is not a function
    at doLogin (LoginPage.js:9)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:454)
    at executeDispatch (react-dom.development.js:584)
    at executeDispatchesInOrder (react-dom.development.js:609)
    at executeDispatchesAndRelease (react-dom.development.js:713)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:722)
    at forEachAccumulated (react-dom.development.js:694)
    at runEventsInBatch (react-dom.development.js:739)
    at runExtractedPluginEventsInBatch (react-dom.development.js:880)
    at handleTopLevel (react-dom.development.js:5803)
    at batchedEventUpdates$1 (react-dom.development.js:24401)
    at batchedEventUpdates (react-dom.development.js:1415)
    at dispatchEventForPluginEventSystem (react-dom.development.js:5894)
    at attemptToDispatchEvent (react-dom.development.js:6010)
    at dispatchEvent (react-dom.development.js:5914)
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)
    at discreteUpdates$1 (react-dom.development.js:24417)
    at discreteUpdates (react-dom.development.js:1438)
    at dispatchDiscreteEvent (react-dom.development.js:5881)

标签： reactjsredux

Answer 1

你忘了解构你的道具

function LoginPage({ fetching, googleLogin }) {

您会得到第一个参数，称为道具，您需要从中获取东西。