react-redux-firebase firestore 返回函数而不是对象

Question

我正在尝试在 React 应用程序上将 firestore 与 react-redux-firebase 一起使用，当我尝试访问 state.firestore 时，它​​返回一个函数而没有对象。我会附上初始化代码。

这是应用文件。

import React from "react";
import ReactDOM from "react-dom";
import "./index.styles.ts";
import * as serviceWorker from "./serviceWorker";
import Theme from "./components/Theme";
import configureStore from "./store/configureStore";
import { Provider } from "react-redux";
import Routes from "routes";

import firebase from 'firebase/app'
import 'firebase/auth';
import 'firebase/firestore';
// import 'firebase/functions' // <- needed if using httpsCallable
import {
  ReactReduxFirebaseProvider,
} from 'react-redux-firebase'
import { createFirestoreInstance } from 'redux-firestore';

const firebaseConfig = {
};


// react-redux-firebase config
const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
  // enableClaims: true // Get custom claims along with the profile
}

// Initialize firebase instance

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

const store = configureStore();
const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance
};

ReactDOM.render(
  <Theme>
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <Routes />
      </ReactReduxFirebaseProvider>
    </Provider>
  </Theme>,
  document.getElementById("root")
);

serviceWorker.unregister();

根据文档，这基本上是能够访问 firestore 所需要的。

这是 configureStore 文件

import { createBrowserHistory } from "history";
import { createStore, applyMiddleware, Store } from "redux";
import { routerMiddleware } from "connected-react-router";
import thunk from "redux-thunk";

import { History } from "history";
import { combineReducers, compose } from "redux";
import { connectRouter } from "connected-react-router";
import * as reducers from "./reducers";
import { firebaseReducer } from "react-redux-firebase";
import { reduxFirestore } from "redux-firestore";

export const history = createBrowserHistory();

const createRootReducer = (history: History<any>) =>
  combineReducers({
    router: connectRouter(history),
    firebase: firebaseReducer,
    firestore: reduxFirestore,
    ...reducers,
  });

export default function configureStore(): Store {
  const store = createStore(
    createRootReducer(history), // root reducer with router state
    compose(
      applyMiddleware(
        routerMiddleware(history), // for dispatching history actions
        thunk
      )
    )
  );
  return store;
}

Answer 1

更新：正如@luis 所证实的，修复实际上是在 configureStore.ts 中导入 firestoreReducer 而不是 reduxFirestore。

您将fiterstore 设置为reduxFirestore，它是从redux-firestore 库导入的，确实是一个函数。

我不确定您是否正确使用它。以下是图书馆npm page的使用代码：

import { createStore, combineReducers, compose } from 'redux';
import { reduxFirestore, firestoreReducer } from 'redux-firestore';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/firestore';
 
const firebaseConfig = {}; // from Firebase Console
const rfConfig = {}; // optional redux-firestore Config Options
 
// Initialize firebase instance
firebase.initializeApp(firebaseConfig);
// Initialize Cloud Firestore through Firebase
firebase.firestore();
 
// Add reduxFirestore store enhancer to store creator
const createStoreWithFirebase = compose(
  reduxFirestore(firebase, rfConfig), // firebase instance as first argument, rfConfig as optional second
)(createStore);
 
// Add Firebase to reducers
const rootReducer = combineReducers({
  firestore: firestoreReducer,
});
 
// Create store with reducers and initial state
const initialState = {};
const store = createStoreWithFirebase(rootReducer, initialState);

注意如何调用 createStoreWithFirebase 而不是 createStore 并且 firestoreReducer 与初始状态一起传递。