function redux-firebase防火墙返回函数而不是对象

Question

我试图在React上使用带有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();

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

这是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所确认的那样，修复程序实际上是在导入firestoreReducer而不是configureStore.ts中的reduxFirestore。

您正在将fiterstore设置为reduxFirestore，它是从redux-消防局库(实际上是一个函数)导入的。

我不确定你是否正确地使用它。以下是来自库的npm页面的使用代码

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与初始状态一起传递。