Redux-带React的firestore

Question

因此，我一直在创建一个应用程序，其中用户需要使用google身份验证登录到firebase。我使用redux、react-redux、react-redux-firebase、redux-firestore和redux-thunk。我能够使用google身份验证成功地将用户登录到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，但是有更好的方法吗？

Answer 1

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

react-redux-firebase构建在redux-firebase之上，提供了React中需要的所有功能。

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