Cannot call reactReduxFirebase() - TypeError: Object is not a function

Question

我正在使用 redux-thunk 作为中间件并尝试连接到 redux-firestore。当我 运行 应用程序时，我收到错误 "TypeError: Object(...) is not a function" at createStore.

import reportWebVitals from './reportWebVitals';
import {createStore,applyMiddleware,compose} from 'redux';
import rootReducer from './store/reducers/rootReducer';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk'
import {reduxFirestore, getFirestore} from 'redux-firestore'
import {reactReduxFirebase, getFirebase} from 'react-redux-firebase'
import FBConfig from './Config/FBConfig'

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

我在我的 thunk 操作中使用了额外的参数，如下所示：

export const createProject=(project)=>{
      return(dispatch,getState,{getFirebase,getFirestore})=>{
            //asyn call to database
            const firestore=getFirestore();
            firestore.collection('projects').add({
                  ...project,
                  authorFirstName:'Nam',
                  authorLastName:'Pam',
                  authorId:123,
                  createAt: new Date()
            }).then(()=>{
                  dispatch({type:'CREATE_PROJECT',project});
                  
            }).catch((err)=>{
                  dispatch({type:'CREATE_PROJECT_ERROR',err})
            })  
      }
};

Answer 1

您看到的错误可能是由于升级 react-redux-firebase from v2 to v3（或基于过时示例的新代码）。此更新引入了一些重大更改，例如删除了 reactReduxFirebase 商店增强器功能。该包现在使用 React 上下文并引入了一些新的钩子，例如 useFirebase 和 useFirestore，它们允许您通过函数组件中的上下文访问 firebase。但这对你的砰砰声没有帮助。

在 Redux Thunk Integration 的页面中，他们建议将 getFirebase 函数传递给 withExtraArgument。

thunk.withExtraArgument(getFirebase)

就访问 firestore 而言，this GitHub discussion 建议通过 getFirebase 功能访问。

getFirebase().firestore()

您希望您的额外参数是一个具有属性 getFirebase 和 getFirestore 的对象。我们将 getFirebase 用作一个 属性 并为 getFirestore 属性.

创建一个内联箭头函数

import {createStore,applyMiddleware, AnyAction} from 'redux';
import thunk from 'redux-thunk';
import {getFirebase} from 'react-redux-firebase';

const store = createStore(
  rootReducer,
  applyMiddleware(
    thunk.withExtraArgument({
      getFirebase,
      getFirestore: () => getFirebase().firestore(),
    })
  )
);