Question

我正在使用这些软件包，但是当我使用 react 创建一个新的create-react-app应用时，突然出现了中间件组合错误。我有以下软件包。你能告诉我我在这里想念什么吗？帮助

也请阅读本指南

"dependencies": {
    "firebase": "^7.4.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-redux-firebase": "^3.0.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "redux": "^4.0.4",
    "redux-firestore": "^0.10.0",
    "redux-thunk": "^2.3.0"
  },

index.js

import ReactDOM from 'react-dom';

import { Provider } from "react-redux";
import { createFirestoreInstance } from "redux-firestore";
import { ReactReduxFirebaseProvider } from "react-redux-firebase";

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import createReduxStore from "./store/createReduxStore";

import App from './App';

const fbConfig = { // hidden for debug };
const rrfConfig = { userProfile: 'clients' };
firebase.initializeApp(fbConfig);
const store = createReduxStore()

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

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

createReduxStore.js

import { createStore, applyMiddleware } from "redux";
import { getFirebase } from "react-redux-firebase";
import { rootReducer } from "./reducers/rootReducer";
import thunk from "redux-thunk";

const initialState = {}

export default () => {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware([thunk.withExtraArgument(getFirebase)])
    )
}

rootReducer.js

import { combineReducers } from "redux"
import { firestoreReducer } from 'redux-firestore';
import { firebaseReducer } from 'react-redux-firebase'

export const rootReducer = combineReducers({
    firestore: firestoreReducer,
    firebase: firebaseReducer,
})

解决方案

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import { createFirestoreInstance,getFirestore } from "redux-firestore";
import { ReactReduxFirebaseProvider, getFirebase } from "react-redux-firebase";
import thunk from "redux-thunk";

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'

import { rootReducer } from "./store/reducers/rootReducer";
import App from './App';

const fbConfig = {};
const rrfConfig = { userProfile: 'users' };
firebase.initializeApp(fbConfig);
//firebase.firestore();
const store = createStore(rootReducer, {}, applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})))

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

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

Answer 1

您不能将中间件数组作为参数传递给applyMiddleware。您应该将每个中间件作为一个单独的参数传递，请尝试以下操作：

export default () => {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk.withExtraArgument(getFirebase))
    )
}

TypeError：中间件不是函数React Redux Firebase的v3迁移指南

1 个答案: