each time it comes up with a new different error: example : "TypeError: Object(...)" or " Cannot call reactReduxFirebase() - TypeError: Object is not a function" I am new to firebase. and I am trying to integrate firebase with react, redux, redux-thunk. firebase recently came up with new version v9 and there is some change in the configuration in which I got lost. the purpose is only cloud i already a have a collection in my db called 'projects' and some dummy data in it.
config.js
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
const fbConfig = {
// my app details ///
};
firebase.initializeApp(fbConfig);
firebase.firestore().settings({ timestampsInSnapshots: true });
export default firebase;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css'
import {createStore, compose, applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import rootReducer from './store/reducers/rootReducer';
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})),
reactReduxFirebase(fbConfig), // redux binding for firebase
reduxFirestore(fbConfig) // redux bindings for firestore
)
);
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
projectAction.js
export const createProject = (project)=>{
return (dispatch, getState,{getFirebase, getFirestore})=>{
const firestore = getFirestore();
firestore.collection('projects').add({
...project,
authorFirstName:'mrxman',
authorLastName:'simon',
authorId:123456,
createdAt:new Date()
}).then(() => {
dispatch({
type: 'CREATE_PROJECT',
project
})
}).catch((err) => {
dispatch({ type: 'CREATE_PROJECT_ERROR', err })
})
}
}
