Object(...) 不是 applyMiddleware(thunk.withExtraArgument( getFirebase, getFirestore )) 的函数错误

Posted 2023-02-19

【中文标题】Object(...) 不是 applyMiddleware(thunk.withExtraArgument( getFirebase, getFirestore )) 的函数错误

【英文标题】：Object(...) is not a function error for applyMiddleware(thunk.withExtraArgument( getFirebase, getFirestore ))Object(...) 不是 applyMiddleware(thunk.withExtraArgument( getFirebase, getFirestore )) 的函数错误

【发布时间】：2020-03-31 13:13:03

【问题描述】：

我在使用 React/Redux/Firebase 工具创建的项目中遇到错误 当我想用我的 CreateProject 反应组件动态添加数据时，我收到了这个错误：× TypeError: Object(...) 不是函数

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

ReactDOM.render(
  <Provider store=store>
    <App />
  </Provider>,
  document.getElementById("root")
);
serviceWorker.unregister();

projectAction.js

export const createProject = project => 
  return (dispatch, getStore,  getFirebase, getFirestore ) => 
    // make async call to database
    const firestore = getFirestore();
    firestore.collection("projects").add(
      ...project,
      authorFirstName: "MyFirstName",
      authorLastName: "MyLastName",
      authorId: 12345,
      createdAt: new Date()
    ).then(
      () => 
        dispatch(
          type: "CREATE_PROJECT",
          project: project
        );
      
    ).chatch(
      (err) => 
        dispatch(
          type: "CREATE_PROJECT_ERROR",
          project: err
        )
      
    )
  ;
;

感谢您的帮助

【问题讨论】：

您的代码中有错字，应该是 .catch

另外，如果您正在调度错误操作，请遵循 SFA 并将 error: true 添加到操作 github.com/redux-utilities/flux-standard-action

【参考方案1】：

我遇到了同样的错误，经过研究，我发现了这个解决方法：

import  ReactReduxFirebaseProvider  from 'react-redux-firebase'
import createReduxStore from './createReduxStore'

const fbConfig =  // object containing Firebase config
const rrfConfig =  userProfile: 'users'  // react-redux-firebase config

// Initialize firebase instance
firebase.initializeApp(fbConfig)

const store = createReduxStore()

const rrfProps = 
 firebase,
 config: rrfConfig,
 dispatch: store.dispatch,
 // createFirestoreInstance // <- needed if using firestore

// Setup react-redux so that connect HOC can be used
const App = () => (
 <Provider store=store>
 <ReactReduxFirebaseProvider ...rrfProps>
  <Todos />
 </ReactReduxFirebaseProvider>
</Provider>
);

源代码：https://react-redux-firebase.com/docs/v3-migration-guide.html

【参考方案2】：

这可能对你有用：

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  createFirestoreInstance, getFirestore, reduxFirestore  from 'redux-firestore'
import  ReactReduxFirebaseProvider, getFirebase  from 'react-redux-firebase'
import fbConfig from './config/fbConfig'
import firebase from 'firebase/app'

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

const rrfProps = 
  firebase,
  config: fbConfig,
  dispatch: store.dispatch,
  createFirestoreInstance
;

ReactDOM.render(
  <Provider store=store>
      <ReactReduxFirebaseProvider ...rrfProps>
          <App />
      </ReactReduxFirebaseProvider>
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

更多详情，请转至official docs。

【讨论】：

为我工作:)

【参考方案3】：

你读过this吗？我认为这个问题和你的一样，你的问题可以通过链接的答案来解决。