无法调用 reactReduxFirebase() - TypeError: Object is not a function [英] Cannot call reactReduxFirebase() - TypeError: Object is not a function

问题描述

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

I an using redux-thunk as a middleware and trying to connect to redux-firestore. When I run the application I am getting the error "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 操作中使用了额外的参数:

I am using the extra arguments in my thunk actions like this:

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})
            })  
      }
};

推荐答案

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

The error that you are seeing is likely due to upgrading react-redux-firebase from v2 to v3 (or basing new code on outdated examples). This update introduced some breaking changes such as the removal of the reactReduxFirebase store enhancer function. The package now uses React contexts and introduced some new hooks such as useFirebase and useFirestore which allow you to access firebase through the context in function components. But that doesn't help with your thunk.

在 Redux Thunk Integration 的页面中，他们建议通过getFirebase 函数到 withExtraArgument.

In the page on Redux Thunk Integration, they recommend passing the getFirebase function to the withExtraArgument.

thunk.withExtraArgument(getFirebase)

至于访问 firestore，这个 GitHub 讨论建议访问它通过 getFirebase 函数.

As far as accessing firestore, this GitHub discussion recommends accessing it through the getFirebase function.

getFirebase().firestore()

您希望额外的参数是一个具有 getFirebase 和 getFirestore 属性的对象.我们使用 getFirebase 作为一个属性，并为 getFirestore 属性创建一个内联箭头函数.

You want your extra argument to be an object with properties getFirebase and getFirestore. We use getFirebase as one property and create an inline arrow function for the getFirestore property.

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(),
    })
  )
);

这篇关于无法调用 reactReduxFirebase() - TypeError: Object is not a function的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！