0

我一直在开发一个小的 React 应用程序，并且进展顺利，我想，但我离我想要的理解水平还差得很远。我遇到了一个让我目瞪口呆的障碍。我的代码一切正常。我在我的环境（Visual Studio）中打开了另一个应用程序，但它不能正常工作，所以在其他程序员的建议下我执行了 npm Install。这就是我的问题开始的地方。我不知道确切的原因，但我担心我的包裹被弄乱了。当我在此之后重新打开自己的应用程序时，我开始在我的调试器中收到标题中的错误消息：“getFirebase() 不是函数”。显然丢失的东西因此停止工作。我试图还原软件包并安装正确版本的东西。根据 npm list 我安装的版本是：

"firebase": "6.6.1",
"react-redux-firebase": "2.4.1",
"redux-firestore": "^0.9.0",

我用谷歌搜索自己很傻，react-redux-firebase v3 似乎经常导致这个问题，但我没有。我不再知道在哪里继续寻找，谷歌没有帮助。你们中的一位专家能指出我正确的方向吗？

您将在下面找到我的 firebase 配置文件、使用它的 index.js、触发错误的操作的代码以及触发该操作的页面。谢谢大家的时间！

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {createStore, applyMiddleware, compose} from 'redux';
import {Provider} from 'react-redux';
import rootReducer from './reducers/rootReducer';
import thunk from 'redux-thunk';
import { reduxFirestore, getFirestore } from 'redux-firestore';
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import fbConfig from './config/fbConfig'

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

const store = createStore(rootReducer, compose(
    applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
    reactReduxFirebase(fbConfig, { userProfile: 'users', useFirestoreForProfile: true, attachAuthIsReady: true }),
    reduxFirestore(fbConfig) // redux bindings for firestore
));

store.firebaseAuthIsReady.then(() => {
    ReactDOM.render(
        <BrowserRouter basename={baseUrl}>
    <Provider store={store}><App/></Provider>
  </BrowserRouter>,
        rootElement);

    registerServiceWorker();
});

fbConfig.js

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

var firebaseConfig = {
    apiKey: "my valid but secret key",
    authDomain: "my domain",
    databaseURL: "my url",
    projectId: "my projectId",
    storageBucket: "",
    messagingSenderId: "some number",
    appId: "some other number"
  };

    // Initialize Firebase
firebase.initializeApp(firebaseConfig);
//const auth = firebase.auth();
firebase.firestore().settings({ });

export default firebase;

authActions.js

import { sendObjectToApi } from '../functions/fetching';

export const signIn = (credentials) => {
    return (dispatch, {getFirebase}) => {
        const firebase = getFirebase();
        console.log(firebase);
        firebase.auth().signInWithEmailAndPassword(
            credentials.email,
            credentials.password
        ).then(() => {
            dispatch({ type: 'LOGIN_SUCCESS' });
        }).catch((err) => {
            dispatch({ type: 'LOGIN_ERROR', err });
        });

    }
}

export const signOut = () => {
    return(dispatch, {getFirebase}) => {
        const firebase = getFirebase();
        console.log(firebase);
        firebase.auth().signOut().then(() => {
            dispatch({ type: 'SIGNOUT_SUCCES' });
        });
    }
}

export const signUp = (newUser) => {
    return (dispatch, {getFirebase}) => {
        const firebase = getFirebase();
        firebase.auth().createUserWithEmailAndPassword(newUser.email, newUser.password)
            .then((resp) => {
                newUser.firebaseId = resp.user.uid;
                sendObjectToApi('/api/User/AddUser', newUser, '');
            }).then(() => {
                dispatch({ type: 'SIGNUP_SUCCES' });
            }).catch(err => {
                dispatch({ type: 'SIGNUP_ERROR', err });
            });
    }
}

签名链接.js

import React from 'react';
import { connect } from 'react-redux'
import { signOut } from '../../Actions/authActions'
import { withRouter } from 'react-router';
import { NavLink } from 'react-router-dom';

const SignedInLinks = (props) => {
    return (
        <ul className="navbar-nav flex-grow">
            <li>
                <NavLink className="text-dark" to="/Login" onClick={props.signOut}>Log uit</NavLink>
            </li>
        </ul>);
};

const mapDispatchToProps = (dispatch) => {
    return {
        signOut: () => dispatch(signOut())
    };
};

export default withRouter(connect(null, mapDispatchToProps)(SignedInLinks));
4

1 回答 1

0

我花了 3 天的时间寻找，但我发现了我的方式的错误，我将留在这里留作后代。

在清理我的代码期间，我删除了一个 Visual Studio 声称未使用的变量。放回去解决了这个问题。更改完全在 authActions.js 中，需要恢复 getState，如下所示：

export const signIn = (credentials) => {
    return (dispatch, **getState**, {getFirebase}) => {
        const firebase = getFirebase();
        console.log(firebase);
        firebase.auth().signInWithEmailAndPassword(
            credentials.email,
            credentials.password
        ).then(() => {
            dispatch({ type: 'LOGIN_SUCCESS' });
        }).catch((err) => {
            dispatch({ type: 'LOGIN_ERROR', err });
        });

    }
}

我希望这可以帮助别人。

于 2019-10-07T08:46:30.450 回答