Reactjs Redux firestore与React

因此，我一直在创建一个应用程序，用户需要使用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();

---

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

如果使用React，请使用。不需要这么多复杂的代码，代码看起来更整洁、更简单。身份验证、firestore和所有其他firebase功能只需少量代码即可实现。它们还带有React钩子，如

useFirebase（）

和

useFirestore（）

，而无需您自己编写

react-redux-firebase

构建在

redux-firebase

之上，提供您在react中需要的所有东西

---

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

那么你是说我甚至不应该担心/尝试使用Redux firestore？是的。确切地因为

react-redux-firebase

构建在

redux-firebase

之上，并提供react中需要的所有东西

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