redux-thunk Integration

getFirebase As Extra Argument

In order to get the most out of writing your thunks, make sure to set up your thunk middleware using its redux-thunk's withExtraArgument method like so:

createStore.js

import { applyMiddleware, compose, createStore } from 'redux'; import thunk from 'redux-thunk'; import { getFirebase } from 'react-redux-firebase' import makeRootReducer from './reducers'; const fbConfig = {} // your firebase config const middlewares = [ thunk.withExtraArgument(getFirebase) ] const store = createStore( makeRootReducer(), initialState, compose( applyMiddleware(...middlewares), ) ); 

App.js

import React from 'react' import { Provider } from 'react-redux' import firebase from 'firebase/app' import 'firebase/auth' import 'firebase/database' import 'firebase/firestore' // make sure you add this for firestore import { ReactReduxFirebaseProvider } from 'react-redux-firebase'; import { createFirestoreInstance } from 'redux-firestore'; import Home from './Home' import createStore from './createStore' import { firebase as fbConfig, reduxFirebase as rfConfig } from './config' import './App.css' // Initialize Firebase instance firebase.initializeApp(fbConfig) const initialState = window && window.__INITIAL_STATE__ // set initial state here const store = createStore(initialState) export default () => ( <Provider store={store}> <ReactReduxFirebaseProvider firebase={firebase} config={rfConfig} dispatch={store.dispatch} createFirestoreInstance={createFirestoreInstance}> <Home /> </ReactReduxFirebaseProvider> </Provider> ) 

Example Thunk

function sendNotification(payload) { return { type: NOTIFICATION, payload } } export function addTodo(newTodo) { return (dispatch, getState, getFirebase) => { return getFirebase() .ref('todos') .push(newTodo) .then(() => { dispatch(sendNotification('Todo Added')) }) }