“ TypeError:Object(...)不是一个函数” react-redux-firebase

时间:2019-11-05 10:53:46

标签: reactjs firebase npm react-redux react-redux-firebase

我正在尝试在React中创建一个项目,并且正在使用Firebase。在我的react-redux-firebase项目中,出现了一行代码制作错误,但我无法解决。我该如何解决“ TypeError:Object(...)不是函数”

我已经搜索了此问题,但无法解决该问题。

我正在关注一个React版本为16.4.1的教程。我不确定这是否是问题

index.js文件

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
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({ getFirebase, getFirestore })),
    reduxFirestore(fbConfig),
    reactReduxFirebase(fbConfig)
  )
);
  

如果我注释掉reatReduxFirebase(),那么它可以正常工作,但是我需要它工作

     

您可以在此处找到所有代码:https://github.com/martuza-shimul/React-Blog-app

我每次都会收到此错误:

TypeError: Object(...) is not a function
Module../src/index.js
i:/Learning new things/react/pma/src/index.js:17
  14 | const store = createStore(
  15 |   rootReducer,
  16 |   compose(
> 17 |     applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
  18 |     reduxFirestore(fbConfig),
  19 |     reactReduxFirebase(fbConfig)
  20 |  

我不确定如何解决此问题。真的很感谢您的帮助/提示。

4 个答案:

答案 0 :(得分:3)

请使用此npm软件包
npm软件包兼容性问题

  

npm i-保存react-redux@5.1.1 react-redux-firebase@2.2.4

答案 1 :(得分:1)

这是react-redux-firebase v2.x.x编码模式,您可能已安装v3.x.x。

  1. 检查您使用的是哪个版本的react-redux-firebase:
    npm ls react-redux-firebase
  1. 如果版本为3.0.0或更高版本,则需要将代码迁移到新的编码模式。有关详细说明,请参见React-Redux-Firebase v3.x.x Migration Guide

答案 2 :(得分:0)

v3及更高版本中已删除reactReduxFirebase存储增强器。现在,您可以使用上下文提供程序创建firebase实例。现在可以执行以下操作:

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

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

const App = () => (
  <Provider store={store}>
    <ReactReduxFirebaseProvider {...rrfProps}>
      <Todo />      // your Component
    </ReactReduxFirebaseProvider>
  </Provider>
 );

到目前为止,'reduxFirestore'工作正常,因此我希望保持原样,但我认为未来几天也会发生同样的情况。因此,最好省略compose和reduxFirestore(fbConfig),而是使用:

import { createFirestoreInstance } from 'redux-firestore'

并将createFirestoreInstance添加到rrfProps中,如下所示:

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

有关更多信息,请参见结帐:http://react-redux-firebase.com/docs/v3-migration-guide.html#remove-createFirebaseConnect-and-createFirestoreConnect

答案 3 :(得分:0)

选项01-调整react-redux & react-redux-firebase的npm软件包版本

npm install react-redux@5.1.1 react-redux-firebase@2.2.4

选项02-参考v3(http://react-redux-firebase.com/docs/v3-migration-guide.html