Question

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

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

我已经用这个在谷歌上发呆了，react-redux-firebase v3似乎经常引起这个问题，但是我没有。我不再知道该继续寻找，Google毫无帮助。你们中的一位专家能指出我正确的方向吗？

在下面，您将找到我的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 });
            });
    }
}

signedInLinks.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));

Answer 1

我花了三天的时间进行搜索，但是我发现自己的方式有误，我将留在这里进行后期研究。

在清理代码期间，我删除了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 });
        });

    }
}

我希望这对某人有帮助。

运行npm install后“ getFirebase（）不是函数”

1 个答案: