I an using redux-thunk
as a middleware and trying to connect to redux-firestore
. When I run the application I am getting the error "TypeError: Object(...) is not a function" at createStore
.
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 {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({getFirestore,getFirebase})),
reduxFirestore(FBConfig),
reactReduxFirebase(FBConfig)
)
);
I am using the extra arguments in my thunk actions like this:
export const createProject=(project)=>{
return(dispatch,getState,{getFirebase,getFirestore})=>{
//asyn call to database
const firestore=getFirestore();
firestore.collection('projects').add({
...project,
authorFirstName:'Nam',
authorLastName:'Pam',
authorId:123,
createAt: new Date()
}).then(()=>{
dispatch({type:'CREATE_PROJECT',project});
}).catch((err)=>{
dispatch({type:'CREATE_PROJECT_ERROR',err})
})
}
};
The error that you are seeing is likely due to upgrading react-redux-firebase
from v2 to v3 (or basing new code on outdated examples). This update introduced some breaking changes such as the removal of the reactReduxFirebase
store enhancer function. The package now uses React contexts and introduced some new hooks such as useFirebase
and useFirestore
which allow you to access firebase through the context in function components. But that doesn't help with your thunk.
In the page on Redux Thunk Integration, they recommend passing the getFirebase
function to the withExtraArgument
.
thunk.withExtraArgument(getFirebase)
As far as accessing firestore, this GitHub discussion recommends accessing it through the getFirebase
function.
getFirebase().firestore()
You want your extra argument to be an object with properties getFirebase
and getFirestore
. We use getFirebase
as one property and create an inline arrow function for the getFirestore
property.
import {createStore,applyMiddleware, AnyAction} from 'redux';
import thunk from 'redux-thunk';
import {getFirebase} from 'react-redux-firebase';
const store = createStore(
rootReducer,
applyMiddleware(
thunk.withExtraArgument({
getFirebase,
getFirestore: () => getFirebase().firestore(),
})
)
);