React-redux-firebase: Uncaught Error: Поставляемый prop / s "dispatch" зарезервирован для внутреннего использования firebaseConnect ()

Question

Я использую рецепт маршрутизации для пользователей, чтобы иметь возможность просматривать / перенаправлять между страницами в зависимости от того, вошел ли пользователь в систему (https://github.com/prescottprue/react-redux-firebase/blob/next/docs/recipes/routing.md-react-routerv4+redux-auth-wrapperv2).

Когда я выхожу, он перенаправляет на страницу входа, но остаетсяпусто, и я получил ошибку:

"Uncaught Error: Supplied prop/s "dispatch" are reserved for internal firebaseConnect() usage."

Мой Login.js компонент использует firebaseConnect(). Есть ли проблема, если один компонент использует firebase, и он используется на другом компоненте, который также использует firebase?

В следующем уроке версии firebase, response-redux-firebase отличаются, но я настроил все в соответствии с документацией и стараюсь использовать самые последние версии. Я не знаю, есть ли в них что-нибудьделать с проблемой.

Из App.js:

<Route
   exact
   path="/login"
   component={UserIsNotAuthenticated(Login)}
/>

из Login.js:

onSubmit = e => {
    e.preventDefault();

    const { firebase } = this.props;
    const { email, password } = this.state;

    firebase
      .login({
        email,
        password
      })
      .catch(err => alert('Invalid Login Credentials'));
  };

export default firebaseConnect()(Login);

package.json:

"dependencies": {
    "classnames": "^2.2.6",
    "firebase": "^6.0.2",
    "history": "^4.9.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.0.3",
    "react-redux-firebase": "^3.0.0-alpha.12",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.0",
    "redux": "^4.0.1",
    "redux-auth-wrapper": "^2.1.0",
    "redux-firestore": "^0.7.4"
  },

Answer 1

Мне удалось решить проблему.Что касается документов (http://docs.react -redux-firebase.com / history / v3.0.0 / docs / recipes / routing.html ), UserIsNotAuthenticated используется непосредственно в компоненте, а не на уровне маршрутаи вместе с withFirebase.

Так это выглядит так: App.js - удалить UserIsNotAuthenticated на Login маршрут:

<Route exact path="/login" component={Login} />

Войти.js:

import { compose } from 'redux';
import { withFirebase } from 'react-redux-firebase';
import { UserIsNotAuthenticated } from '../../helpers/auth';

...

export default compose(
  UserIsNotAuthenticated,
  withFirebase
)(Login);

Теперь все работает.После входа вы будете перенаправлены со страницы входа на домашнюю страницу, а при выходе вы будете перенаправлены на страницу входа.