如何使用react-redux-firebase获取firestore实例？

Question

authAction.js:这里firebase.set不工作，firestore.set也不工作。如果我包含了getFirestore，那么它会说getFirestore不是一个函数。如果我是以下面的方式做的，那么它会显示许可被拒绝。

firebase.set(users/${createdUser.user.uid}，{ ...newUser })如何在这里使用firestore的set函数

export const registerUser = user => 
  async (dispatch, getState, getFirebase) => {
    const firebase = getFirebase();
    // const firestore = getFirestore();
    try {
      let createdUser = await firebase.auth().createUserWithEmailAndPassword(user.email, user.password);
      console.log('createdUser', createdUser);
      await createdUser.user.updateProfile({
        displayName: user.displayName
      });
      let newUser = {
        displayName: user.displayName,
        createdAt: firebase.firestore.FieldValue.serverTimestamp()
      }
      console.log('new user', newUser);
      await firebase.set(`users/${createdUser.user.uid}`, { ...newUser })
      dispatch(closeModal())
    }
    catch (err) {
      console.log(err.message)
    }
  }

firebase.js

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/database';
import 'firebase/auth';
import 'firebase/storage';

const firebaseConfig = {}

firebase.initializeApp(firebaseConfig);
firebase.firestore();

export default firebase;

configureStore.js

import { createStore, applyMiddleware } from "redux";
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import { reduxFirestore, getFirestore } from 'redux-firestore';
import { devToolsEnhancer, composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from "../reducers/rootReducer";
import thunk from "redux-thunk";
import firebase from '../config/firebase';

//react redux firebase config
export const rrfConfig = {
  userProfile: 'users',
  attachAuthIsReady: true,
  useFirestoreForProfile: true
}

/*
########section without applyMiddleware(thunk)##########
*/

// export const configureStore = () => {
//   const store = createStore(rootReducer, devToolsEnhancer());
//   return store;
// }  


/*
########section with applyMiddleware(thunk)##########
*/
export const configureStore = () => {
  const middlewares = [thunk.withExtraArgument(getFirebase)];

  const composedEnhancer = composeWithDevTools(
    applyMiddleware(...middlewares),
    // reactReduxFirebase(firebase, rrfConfig),
    // reduxFirestore(firebase)
  );

  const store = createStore(rootReducer, composedEnhancer)

  return store
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
import App from './app/layout/App';
import ReduxToastr from 'react-redux-toastr';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { configureStore, rrfConfig } from './app/store/configureStore';
import ScrollToTop from './app/common/util/ScrollToTop';
import firebase from '../src/app/config/firebase';
import { ReactReduxFirebaseProvider } from 'react-redux-firebase';
import { createFirestoreInstance } from 'redux-firestore';

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <ReactReduxFirebaseProvider
      firebase={firebase}
      config={rrfConfig}
      dispatch={store.dispatch}
      createFirestoreInstance={createFirestoreInstance}
    >
      <BrowserRouter>
        <ScrollToTop>
          <ReduxToastr
            position='bottom-right'
            transitionIn='fadeIn'
            transitionOut='fadeOut'
          />
          <App />
        </ScrollToTop>
      </BrowserRouter>
    </ReactReduxFirebaseProvider>
  </Provider>,
  document.getElementById('root'));
serviceWorker.unregister();

Answer 1

一种方法是：

export const registerUser = user => 
  async (dispatch, getState, getFirebase) => {
    const firebase = getFirebase();
    const firestore = firebase.firestore();  // <===
    try {
      let createdUser = await firebase.auth().createUserWithEmailAndPassword(user.email, user.password);
      console.log('createdUser', createdUser);
      /*await createdUser.user.updateProfile({
        displayName: user.displayName
      });*/
      let newUser = {
        displayName: user.displayName,
        createdAt: firebase.firestore.FieldValue.serverTimestamp()
      }
      console.log('new user', newUser);
      await firestore.collection("users").doc(createdUser.user.uid).set({ ...newUser }); // <===
      dispatch(closeModal())
    }
    catch (err) {
      console.log(err.message)
    }
  }

但是由于您在rrfConfig中包含了userProfile: 'users'，我认为updateProfile已经在做您想要做的事情了。所以这将是相同的结果，并且您不需要firestore实例：

export const registerUser = user => 
  async (dispatch, getState, getFirebase) => {
    const firebase = getFirebase();
    try {
      let createdUser = await firebase.auth().createUserWithEmailAndPassword(user.email, user.password);
      console.log('createdUser', createdUser);
      // updateProfile adds these to the correct users document
      await firebase.updateProfile({
        displayName: user.displayName,
        createdAt: firebase.firestore.FieldValue.serverTimestamp()
      });
      dispatch(closeModal())
    }
    catch (err) {
      console.log(err.message)
    }
  }