Я не могу передать реквизиты через карту mapDispatchToProps

Question

Я пытаюсь передать действие своему компоненту через mapDispatchToProps, но оно постоянно говорит мне, что это действие не является функцией, я также пытался вставить объект doGoogleLoginAction directo в соединение, но оно также не работает, я думаю, что там проблема в самом действии, но я не понимаю, что это такое. Проблема возникает, когда я нажимаю кнопку iniciar в LoginPage. js

здесь 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 wich 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)

Answer 1

Вы забыли деструктурировать свой реквизит

function LoginPage({ fetching, googleLogin }) {

Вы получаете первый аргумент, называемый реквизитом, из которого вам нужны вещи.

Answer 2

все методы и состояния в приставке будут использоваться в компоненте как реквизиты.

this.props.googleLogin()