带有React的Redux消防仓库

Question

所以我一直在创建一个应用程序，用户需要使用谷歌身份验证登录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，但我一直在玩它

如果有人能告诉我如何做到这一点，我将不胜感激。谢谢

快速更新：我已经想好了如何使用这个代码至少写信给消防商店

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。