2

所以我一直在创建一个应用程序，用户需要使用谷歌身份验证登录到 Firebase。我正在使用 redux、react-redux、react-redux-firebase、redux-firestore 和 redux-thunk。我能够使用谷歌身份验证成功地将用户登录到 firebase。我现在想使用 firestore 来收集所有用户。我查看了 redux-firestore 的文档，获取/操作的方法有点不同。我已经尝试使用文档，但我无法让这些功能与 redux-firestore 一起使用。

这是动作

export const signIn = () => (
    dispatch, 
    getState, 
    {getFirebase, getFirestore}) => {
        const firebase = getFirebase();
        const firestore = getFirestore();
        firebase.auth().signInWithPopup(provider).then(function(result) {
            if(result.credential) {
                firestore.get({collection: 'users', doc: result.user.uid}).then(function(doc) {
                    if(!doc.exists){
                        console.log("new!")
                        firestore.add(
                            {collection: 'users', doc: result.user.uid}, 
                            {name: firebase.auth.currentUser.displayName});
                    } else{
                        console.log("old!")
                    }
                })
            }
        }).catch((err) => {

        })
};

这是我在 index.js 中为 src 文件夹设置的

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter} from 'react-router-dom';
import {createStore, applyMiddleware, compose} from 'redux';
import {Provider} from 'react-redux';
import allReducers from './reducers';
import thunk from 'redux-thunk';
import firebase from './Firebase';
import {firebaseConfig} from './Firebase'
import {createFirestoreInstance, getFirestore, reduxFirestore} from 'redux-firestore';
import {ReactReduxFirebaseProvider, getFirebase} from 'react-redux-firebase';

const store = createStore(
  allReducers,
  compose(
    applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
    reduxFirestore(firebaseConfig)
  ));

const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true
};

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

}

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

serviceWorker.unregister();

我知道我没有在这段代码中使用 createFirestoreInstance ，但我正在玩它。

如果有人能告诉我如何让这个工作，我将不胜感激。谢谢！

快速更新：我已经弄清楚如何使用此代码至少写入 Firestore

const userRef = firebase.firestore().collection('users').doc(result.user.uid);
                userRef.get().then(function(doc) {
                    if(!doc.exists){
                        userRef.set({name: result.user.displayName});
                    }
                })

这不是最好的（或者可能是正确的解决方案），但它确实有效。它没有使用 redux-firestore，但有更好的方法吗？

4

1 回答 1

2

如果您使用 React，请使用react-redux-firebase。不需要这么多复杂的代码，代码看起来更整洁、更简单。身份验证、firestore 和所有其他 firebase 功能只需少量代码即可开箱即用。它们还带有 React 钩子useFirebase()，useFirestore()而不是您需要自己编写它们。

react-redux-firebase建立在 React 之上redux-firebase并提供了你在 React 中需要的所有东西。

如果你的应用只使用 firebase，我什至建议你只使用普通的 Redux，而不使用 Redux Thunk 或 Redux Saga。

于 2020-04-05T02:41:10.810 回答