3

我的项目中出现错误，当我想使用我的 CreateProject 反应组件动态添加数据时，我使用 React/Redux/Firebase 工具创建它我收到此错误：× TypeError: Object(...) is not a function

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

感谢您的帮助

4

3 回答 3

7

This may work for you:

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

For more details, go to official docs.

于 2020-04-26T20:31:08.610 回答
2

我有同样的错误，经过研究，我发现了这个修复：

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

于 2020-05-02T16:54:19.087 回答
1

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

于 2019-12-14T02:12:53.223 回答