在React中使用redux访问firebase API

Question

我正在创建一个react应用程序，应该连接到Firebase和查询Firestore。我使用react-redux-firebase和redux-firestore连接到Firebase API。然而，我得到了一个错误，指示一个对象...不是函数。请协助。下面是我的代码

我像这样导入这两个

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。

如果这些信息对你有帮助，请让我知道！