reactjs - TypeError: Object (...) is not a function; applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore}))，报错的解决方法是什么？

Question

我通过执行 npm i --save react-redux-firebase @ next 尝试了 applyMiddleware (thunk.withExtraArgument ({getFirebase, getFirestore})) 的解决方案，但它没有用。

你能帮助我吗？

index.js

/* eslint-disable no-unused-vars */
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import firebase from 'firebase'
import {createStore, applyMiddleware,compose,} from 'redux';
import rootReducer from './store/rootReducer';
import {Provider} from 'react-redux'
import thunk from 'redux-thunk'
import {getFirestore,reduxFirestore } from 'redux-firestore'
import {getFirebase,reactReduxFirebase} from 'react-redux-firebase'
import fbConfig from './config/fbConfig'
import { firestore } from 'firebase';

import { render } from 'react-dom'



const store=createStore(rootReducer, 
    compose(
    applyMiddleware(thunk.withExtraArgument({getFirebase,getFirestore})),
    reduxFirestore(fbConfig,firebase),
    reactReduxFirebase(fbConfig, firebase, {useFirestoreForProfile:true,
        userProfile:'users',
        attachAuthIsReady: true})
    )
    );

store.firebaseAuthIsready.then(()=>{
    ReactDOM.render(<Provider store ={store}></Provider>><App />, document.getElementById('root'));


})

rootreducer.js

import authReducer from '../store/actions/authReducer';
import projectReducer from './projectReducer';
import {combineReducers} from 'redux';
 import {firestoreReducer} from 'redux-firestore';
 import {firebaseReducer} from 'react-redux-firebase';

const rootReducer=combineReducers({
    auth:authReducer,
    project:projectReducer,
     firestore:firestoreReducer,
     firebase:firebaseReducer
})

export default rootReducer

标签： reactjsfirebaseredux

Answer 1

这只会处理删除特定错误，但您将来在创建 Firestore 实例时会遇到问题。但为此，您也可以随时 ping 我

1.configureStore.js

import { createStore, applyMiddleware } from "redux";
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import { reduxFirestore, getFirestore } from 'redux-firestore';
import { devToolsEnhancer, composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from "../reducers/rootReducer";
import thunk from "redux-thunk";
import firebase from '../config/firebase';

//react redux firebase config
export const rrfConfig = {
  userProfile: 'users',
  attachAuthIsReady: true,
  useFirestoreForProfile: true,
  updateProfileOnLogin: false
}

export const configureStore = () => {
  const middlewares = [thunk.withExtraArgument(getFirebase)];

  const composedEnhancer = composeWithDevTools(
    applyMiddleware(...middlewares),
  );

  const store = createStore(rootReducer, composedEnhancer)

  return store
}

2.Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
import App from './app/layout/App';
import ReduxToastr from 'react-redux-toastr';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { configureStore, rrfConfig } from './app/store/configureStore';
import ScrollToTop from './app/common/util/ScrollToTop';
import firebase from '../src/app/config/firebase';
import { ReactReduxFirebaseProvider } from 'react-redux-firebase';
import { createFirestoreInstance } from 'redux-firestore';

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <ReactReduxFirebaseProvider
      firebase={firebase}
      config={rrfConfig}
      dispatch={store.dispatch}
      createFirestoreInstance={createFirestoreInstance}
    >
      <BrowserRouter>
        <ScrollToTop>
          <ReduxToastr
            position='bottom-right'
            transitionIn='fadeIn'
            transitionOut='fadeOut'
          />
          <App />
        </ScrollToTop>
      </BrowserRouter>
    </ReactReduxFirebaseProvider>
  </Provider>,
  document.getElementById('root'));

serviceWorker.unregister();