Я работал над небольшим приложением реакции, и оно шло хорошо, подумал я, но я не достиг того уровня понимания, который мне бы хотелось. Я столкнулся с препятствием, которое ошеломило меня. Все было хорошо в моем коде. Я открыл другое приложение в моей среде (Visual Studio), и оно не работало должным образом, поэтому по совету другого программиста я выполнил npm Install. Это где мои проблемы начались. Я не знаю точную причину, но я боюсь, что мои пакеты были испорчены. Когда я снова открыл свое собственное приложение после этого, я начал получать сообщение об ошибке в заголовке: «getFirebase () не является функцией» в моем отладчике. Очевидно потерянные вещи перестали работать в результате. Я попытался отменить пакеты и установить правильную версию вещи. Согласно списку npm мои установленные версии:
"firebase": "6.6.1",
"react-redux-firebase": "2.4.1",
"redux-firestore": "^0.9.0",
Я глупо гуглял с этим, кажется, что Response-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 });
});
}
}
signatureInLinks.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));