在 React 中使用 redux 访问 firebase API

Question

我正在创建一个应该连接到 Firebase 并查询 Firestore 的反应应用。我正在使用 react-redux-firebase 和 redux-firestore 连接到 Firebase API。但是，我收到一个错误，表明 Object... 不是函数。请协助。下面是我的代码

我这样导入两个

import { reduxFirestore, getFirestore } from 'redux-firestore';
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';

然后我像这样导入我的 Firebase 配置文件：

import fbConfig from './config/fbConfig';

然后我的商店如下：

const store = createStore(rootReducer, 
  compose(
    applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
      reduxFirestore(fbConfig),
      reactReduxFirebase(fbConfig)
    )
  );

受影响的线路是这个

applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),

它说类型错误对象不是方法。

请帮忙。谢谢

Answer 1

此错误通常与您正在导入的react-redux-firebase 的版本有关。请运行以下命令，检查这是否解决了您的兼容性问题。

npm i --save react-redux-firebase@next

除此之外，正如其他帖子 here 和官方文档 here 中所述，您需要更改代码以适应所需的设置，以使其正常工作。

您的新代码应该看起来更像这样。

import { ReactReduxFirebaseProvider } from 'react-redux-firebase'
import { createFirestoreInstance } from 'redux-firestore'

const store = createStore(
  rootReducer,
  initialState,
  compose(
  )
)

 const rrfProps = {
   firebase,
   config: rrfConfig,
   dispatch: store.dispatch,
   createFirestoreInstance // <- needed if using firestore
 }
const App = () => (
  <Provider store={store}>
   <ReactReduxFirebaseProvider {...rrfProps}>
      <Todos />
   </ReactReduxFirebaseProvider>
  </Provider>
);

此代码未经测试，但是它基于成功案例和官方文档，所以我相信它应该对您有所帮助。如果您想更好地了解您的问题，我建议您尝试使用它并检查我在此处链接的 URL。

如果这些信息对您有帮助，请告诉我！