To get reduxFirestore to work in my app i tried the following:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './store/reducers/rootReducer';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk'
import { createFirestoreInstance, reduxFirestore, getFirestore } from 'redux-firestore';
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase';
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
import { fbConfig, reduxFirebase as rfConfig} from './config/fbConfig';
firebase.initializeApp(fbConfig)
// firebase.firestore.settings({ timeStampsInSnapshots: true });
firebase.firestore()
const store = createStore(rootReducer,
compose(
applyMiddleware(thunk.withExtraArgument({ getFirestore, getFirebase })),
reduxFirestore(firebase, fbConfig) // COMPILATION ERROR HERE
)
);
const rrfProps = {
firebase,
config: rfConfig,
dispatch: store.dispatch,
createFirestoreInstance
}
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<App />
</ReactReduxFirebaseProvider>
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorkerRegistration.register();
reportWebVitals();
But I get a compilation error in reduxFirestore(firebase, fbConfig)
saying:
"message": "Argument of type 'typeof firebase' is not assignable to parameter of type 'typeof import(<PATH OF MINE/node_modules_index>)'.\n Property 'firebase' is missing in type 'typeof firebase' but required in type 'typeof
If I comment reduxFirestore(firebase, fbConfig)
out, I obtain this error in my action when I call firestore:
TypeError: getFirestore is not a function
Action code:
import { Dispatch } from 'react';
type Action = {
type:string,
project?: {title:string, content:string}
err?: unknown
}
export const createProject = (project:{title:string, content:string}) => {
return (dispatch:Dispatch<Action>, getState:any, getFirestore:any ) => {
// make async call to database
const firestore = getFirestore(); // LINE WITH THE ERROR
firestore.collection('projects').add({
...project,
authorFirstName: 'Who',
authorLastName: 'Ever',
authorId: 12345,
createdAt: new Date()
}).then(() => {
dispatch({ type:'CREATE_PROJECT', project});
}).catch((err:unknown) => {
dispatch({ type:'CREATE_PROJECT_ERROR', err })
})
}
}
I dont see what I am missing as the same project in Javascript the reduxFirestore(firebase, fbConfig)
was working fine.
I also tried reduxFirestore(fbConfig)
but I get a type error:
Argument of type '{ apiKey: string; authDomain: string; projectId: string; storageBucket: string; messagingSenderId: string; appId: string; measurementId: string; }' is not assignable to parameter of type 'typeof import("PATH OF MINE/node_modules/firebase/index")'.
Find also the fields of my fbConfig (I share only the fields because its not relevant to share my app data. In the project its in the file of course):
export const fbConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
Finally I solved it getting the firestore instance like this: const db = firebase.firestore();
from the import firebase from 'firebase/app';
. Seems that there is static acces to the firestore. It seems that to compose the store with reduxFirestore(firebase, fbConfig)
is not needed anymore, as this static access to the firestore makes it possible to dispatch actions asyncronously after que query to the firebase firestore which I think is the purpose of reduxFirestore(firebase, fbConfig)
.
Similar to the workaround provided here as @DanielOcando suggested in the comments but without getFirebase()
, which I could not acces when I was trying to solve this issue, as I could not pass in the fbConfig to the reduxFirestore
function