将 firebase 作为参数添加到 thunk 时，Object(...) 不是函数答案

【问题标题】：Object(...) is not a function when adding firebase as argument to a thunk将 firebase 作为参数添加到 thunk 时，Object(...) 不是函数
【发布时间】：2019-11-23 18:04:39
【问题描述】：

用 redux 配置 firebase 对我来说很痛苦。

我不知道出了什么问题，但我感到很困惑。我正在尝试将getFirebase 和getFirestore 作为参数传递给thunk，但我遇到了这个错误：

在尝试将额外参数添加到 thunk 之前，我让它工作了。我正在使用下面的代码：

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import rootReducer from './modules'
import {reduxFirestore, getFirestore} from 'redux-firestore'
import {reactReduxFirebase, getFirebase} from 'react-redux-firebase'
import fbConfig from './firebase/config'

export function initializeStore(initialState) {
  const _thunk = thunk.withExtraArgument({ getFirebase, getFirestore })

  const middlewareEnhancer = applyMiddleware(_thunk)

  const composedEnhancers = compose(
    middlewareEnhancer,
    reduxFirestore(fbConfig),
    reactReduxFirebase(fbConfig)
  )

  const store = createStore(rootReducer, initialState, composedEnhancers)

  return store
}

您知道会发生什么吗？我很绝望。

非常感谢。

【问题讨论】：

错误出现在 L14 上，所以开始实际调试该行：您要推送到 compose 的内容是什么？（例如，如果您通过控制台记录它们，开发工具会告诉您什么有关它们的信息）。另外，回到源代码：如果您只使用普通的 thunk，并且不将 apply 作为 const 捕获，那么 您的代码的那部分 现在可以工作吗？（例如，错误消失了，或者它现在在代码中的某个位置）。 [非常重要][(/help/how-to-ask)，这些细节很重要，所以请在帖子中谈论/展示您的调查结果。
这是特定于“redux-firestore”包的。如果你很绝望，如果你在这里没有得到任何帮助，可以尝试查看他们的 GitHub 存储库上发布的开放/旧问题。

标签： reactjs firebase redux redux-thunk redux-firestore

【解决方案1】：

如果你提到'redux-firestore'和'react-redux-firebase'的版本会很棒。

最近有一个 react-redux v6 的迁移： http://react-redux-firebase.com/docs/v3-migration-guide.html

您可能需要对代码进行的更改：

- import { reactReduxFirebase, getFirebase } from 'react-redux-firebase'
+ import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase'

- import { reduxFirestore, getFirestore } from 'redux-firestore'
+ import { createFirestoreInstance, reduxFirestore, getFirestore } from 'redux-firestore'

+ import firebase from "firebase/app";

当您拥有 react-redux-firebase 的最新版本时使用此选项，因为 reactReduxFirebase 的 API 已删除。还将composedEnhancers更改如下：

- const composedEnhancers = compose(
-    middlewareEnhancer,
-    reduxFirestore(fbConfig),
-    reactReduxFirebase(fbConfig)
-   )

+  const composedEnhancers = compose(
+     middlewareEnhancer,
+     reduxFirestore(firebase, fbConfig)
+  )

添加 react-redux-firebase 属性

+ const rrfProps = {
+   firebase,
+   config: fbConfig,
+   dispatch: store.dispatch, 
+   createFirestoreInstance,
+ }

您需要为您的应用提供 react-redux-firebase 道具：

<ReactReduxFirebaseProvider {...rrfProps}>
        <App />
</ReactReduxFirebaseProvider>

它应该可以正常工作。您可以按照上面给出的链接中的说明添加 rrfConfig，以防它仍然不起作用。

【讨论】：