I was using these packages but Suddenly I got this error on middleware composition when I created a new react app using create-react-app .(我正在使用这些软件包，但是当我使用create-react-app创建一个新的react应用程序时，突然出现了中间件组合错误。)
I have the following packages.(我有以下软件包。) Can you please explain to me what am I missing here?(你能告诉我我在这里想念什么吗？) HELP(救命)
Looked up to this guide as well(还要查阅本指南)
Image Showing Error(图片显示错误)
"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,
})
Solution(解)
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')
);
ask by KABIN POKHREL translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
