Question

正在使用react-redux在redux-thunk（带有钩）中进行项目。到了要使用某种帐户身份验证的地步。因为它很流行，所以我选择使用Firebase。因此，我开始在YouTube上关注过时的忍者课程。知道这一点，我正在检查firebase的文档，以了解如何使用redux-thunk进行身份验证。现在我要指出的是，当我尝试登录Firebase时，出现以下错误： “ Firebase实例尚不存在。请检查您的撰写功能。”

这里描述了类似的问题，但这很容易（当然...）： SO LINK

我只能假设问题出在我的store.js的compose函数中。只是，我做了本书中的所有事情（或者至少我这么认为）：http://docs.react-redux-firebase.com/history/v3.0.0/docs/getting_started.html，似乎没有什么帮助。

也许外观新颖的人可以检查我的代码并告诉我我做错了什么地方。

由于我假设错误是在store.js中，所以我将从它开始：

store.js:

import { createStore, applyMiddleware} from 'redux';
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from 'redux-thunk';

import { getFirebase } from 'react-redux-firebase';
// import { getFirestore, reduxFirestore } from "redux-firestore";

import rootReducer from './reducers/rootReducer';

const middlewares = [
    thunk.withExtraArgument({getFirebase})
  ];

const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(...middlewares)));

export default store;

fbConfig.js

const fbConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
  };

export default fbConfig;

我将上述文件导入到index.js中：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from "react-router-dom";

import store from './store';
import App from './components/App/App';

import firebase from "firebase/app";
import "firebase/auth"

import fbConfig from "./config/fbConfig";

// import { createFirestoreInstance } from "redux-firestore";
import { ReactReduxFirebaseProvider } from 'react-redux-firebase';

import registerServiceWorker from "./registerServiceWorker";

console.log(fbConfig);
firebase.initializeApp(fbConfig);

//rrf stores authenticated users' data in Cloud Firestore
const rrfConfig = {
  userProfile: "users",
  // useFirestoreForProfile: true,
}

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  // createFirestoreInstance
}

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store} >
      <ReactReduxFirebaseProvider {...rrfProps} >
        <App />
      </ReactReduxFirebaseProvider>
    </Provider>
  </BrowserRouter>,
  document.querySelector("#root")
);

registerServiceWorker();

rootReducer.js 这里我还有一个问题，因为当我在Internet上进行检查时，很多人只有一个文件，该文件正在处理称为auth（至少在根目录中存在）的身份验证请求（登录，注销或注册）减速器，例如auth：authReducer）。我将逻辑分为3个单独的文件。现在，我想知道是否可以执行此操作，或者我还应该拥有一个auth reducer？

import { combineReducers } from 'redux';
import { firebaseReducer } from "react-redux-firebase";

import SigninReducer from "./auth/signinReducer";
import SignoutReducer from "./auth/signoutReducer";
import SignupReducer from "./auth/signupReducer";

const rootReducer = combineReducers({
    firebase: firebaseReducer,

    signin: SigninReducer,
    signout: SignoutReducer,
    signup: SignupReducer
});

export default rootReducer;

signinReducer.js

import { GET_SIGNIN_SUCCESS, GET_SIGNIN_ERROR } from "../../actions/index";

const DefaultState = {
    authMsg: ""
};

const SigninReducer = (state = DefaultState, action) => {
    switch (action.type) {
        case GET_SIGNIN_ERROR:
            console.log("login failed");
            return {
                ...state,
                authMsg: "Unable to login"
            };
        case GET_SIGNIN_SUCCESS:
            console.log("login success");
            return {
                ...state,
                authMsg: "login success"
            };
    default:
        return state
    }
}

export default SigninReducer;

action / getSignin.js

import { GET_SIGNIN_ERROR, GET_SIGNIN_SUCCESS } from "../index";

export const getSignin = (credentials) => async (dispatch, getState, {getFirebase}) => {
    console.log(credentials);
    const firebase = getFirebase();
    console.log(firebase);
    try {
        await firebase()
            .auth()
            .signInWithEmailAndPassword(credentials.email, credentials.password)
            .then(() => {
                dispatch({
                    type: GET_SIGNIN_SUCCESS
                });
            })
            .catch((error) => {
                dispatch({
                    type: GET_SIGNIN_ERROR,
                    error
                });
            });
        
    } catch(e) {
        dispatch ({
            type: GET_SIGNIN_ERROR,
            payload: "Invalid login credentials."
        });
    }
};

component / userSignin.js

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { Link } from "react-router-dom";
import { getSignin } from "../../actions/auth/getSignin";

const UserSign = () => {
    const dispatch = useDispatch();

    const [ userStatus, setUserStatus ] = useState ({
        email: "",
        password: ""
    })

    const handleSubmit = (event) => {
        dispatch(getSignin(userStatus));
        event.preventDefault();
    }

    const handleChange = (event) => {
        const { id, value } = event.target;
        setUserStatus({
                ...userStatus,
                [id]: value
        })
    }

    const showLogin = () => {
        return (
            <div>
                <h4>Login</h4>
                <form onSubmit={handleSubmit}>
                    <div>
                        <label htmlFor="email">Email address</label>
                        <input type="email" id="email" onChange={handleChange} required />
                    </div>
                    <div>
                        <label htmlFor="password">Your Password</label>
                        <input type="password" id="password" onChange={handleChange} required />
                    </div>
                    <button>Login</button>
                </form>
            </div>
        )
    }

    return (
        <div>
            {showLogin()}
            <Link to={"/signup"}><p>SignUp</p></Link>
            <Link to={"/"}>Back</Link>
        </div>
    )
}

export default UserSign;

当我检查console.log（fbConfig）时，我看到该Firebase配置已初始化（API_KEY等）。同样在我的action / getSignin.js文件中，我可以console.log我的登录名和密码并检查它们是否在那里传递。但是我收到一个错误消息，因为我的API_KEY丢失了。

我用Firebase给出的值再次检查了API_KEY的值，它们确实匹配。

我没主意了。请帮忙

Answer 1

所以我明白了。

我的API_KEY值等存储在.env.local文件中。原来，如果我直接将它们写在fbConfig文件中，那么一切都会正常。不知道为什么，因为在我以前的应用程序中，我确实做了同样的事情，而且行之有效。我也可以console.log从index.js中的.env.local文件中注销值。但是不知何故它们没有被初始化。

好吧，现在一切正常。

为什么我无法通过Firebase进行身份验证？

1 个答案: