React-redux-firebase: fix(examples): update react-native example to use v3 API

[ChristopherJohnson25]

Hi, I'm using the React Native example from the repo https://github.com/prescottprue/react-redux-firebase/tree/master/examples/complete/react-native-firebase and am currently getting this issue.

I'm on

"react-redux-firebase": "^3.0.3"
"react-native-firebase": "~5.5.6",

createStore.js code here:

import { compose, createStore } from 'redux';
import RNFirebase from 'react-native-firebase';
import { reactReduxFirebase } from 'react-redux-firebase';
import makeRootReducer from './reducers';

const reactNativeFirebaseConfig = {
 debug: true
};

const reduxFirebaseConfig = {
 userProfile: 'users', // save users profiles to 'users' collection
};

export default (initialState = { firebase: {} }) => {
 // initialize firebase
 const firebase = RNFirebase.initializeApp(reactNativeFirebaseConfig);

 const store = createStore(
   makeRootReducer(),
   initialState,
   compose(
    reactReduxFirebase(firebase, reduxFirebaseConfig), // pass initialized react-native-firebase app instance
    // applyMiddleware can be placed here
   )
 );

 return store;
};

[prescottprue]

@ChristopherJohnson25 This is the old api, please use the new API which does not have a store enhancer (reactReduxFirebase). The simple example has the updated version of the API.

Thanks for noting that the example is out of date, I'll make sure to get that updated.

[ChristopherJohnson25]

Can anyone help me out with getting this updated to the new API? The example is very, very different than this, and I'm quite lost. Thanks!

[prescottprue]

@ChristopherJohnson25 You should be able to just follow the setup steps in the README. The only difference being that you pass in react-native-firebase instead of firebase:

import React from 'react-native'
import { Provider } from 'react-redux'
import RNFirebase from 'react-native-firebase';
import { createStore, combineReducers } from 'redux'
import { ReactReduxFirebaseProvider, firebaseReducer } from 'react-redux-firebase'
// import { createFirestoreInstance, firestoreReducer } from 'redux-firestore' // <- needed if using firestore

const fbConfig = {}

// react-redux-firebase config
const rrfConfig = {
  userProfile: 'users'
  // useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
}

// Initialize firebase instance
RNFirebase.initializeApp(fbConfig)

// Add firebase to reducers
const rootReducer = combineReducers({
  firebase: firebaseReducer
  // firestore: firestoreReducer // <- needed if using firestore
})

// Create store with reducers and initial state
const initialState = {}
const store = createStore(rootReducer, initialState)

const rrfProps = {
  firebase: RNFirebase, 
  config: rrfConfig,
  dispatch: store.dispatch,
  // createFirestoreInstance // <- needed if using firestore
}

// Setup react-redux so that connect HOC can be used
function App() {
  return (
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <Todos />
      </ReactReduxFirebaseProvider>
    </Provider>
  );
}

This coded isn't fully tested, but the point being, you can follow all of the examples, and just replace firebase with react-native-firebase.

You can also reach out over gitter if you have implementation questions. There are a number of folks on there using react-native-firebase

[ChristopherJohnson25]

Sounds good, thank you!! I'll mess around with this.

[ryanwarsaw]

Oh no! Super disappointed to see the store enhancer was removed. I was attempting to use this library following along with the Chrome Extension example (using redux-webext library) and couldn't figure out why I was running into issues. Back to the drawing board I guess 😆

[prescottprue]

@ryanwarsaw The store enhancer was removed since the React Context API is now stable and is the suggested way for passing a context such as the extended Firebase instance.

You should still be able to use createFirebaseInstance to get the extended instance (which is what the context provider does internally). I'm working on updating the examples to follow this pattern

[Peeeep]

Here's a little helper function to get the extended firebase version. Please note that react-native-firebase has been split up in several different modules since v6.0.0, which have to be cherry-picked.

// Cherry-pick modules of react-native-firebase 6.x
import '@react-native-firebase/analytics';
import '@react-native-firebase/auth';
import '@react-native-firebase/crashlytics';
import '@react-native-firebase/dynamic-links';
import '@react-native-firebase/firestore';
import '@react-native-firebase/perf';
import '@react-native-firebase/remote-config';

import rnfirebase from '@react-native-firebase/app';
// When using react-native-firebase 5.x
// import rnfirebase from 'react-native-firebase';
import {createFirebaseInstance} from 'react-redux-firebase';
import {createStore} from 'redux';
import {createFirestoreInstance} from 'redux-firestore';

import rootReducer from './reducer';

export default function configureFirebase(dispatch) {
  const rrfConfig = {
    userProfile: 'users',
    useFirestoreForProfile: true,
    enableRedirectHandling: false,
  };

  const firebase = rnfirebase.app();
  // When using react-native-firebase 5.x – untested!
  // const firebase = rnfirebase();

  createFirebaseInstance(firebase, rrfConfig, dispatch);
  createFirestoreInstance(firebase, rrfConfig, dispatch);

  return firebase;
}

const store = createStore(rootReducer /* , initialState, enhancer */);

export const firebase = configureFirebase(store.dispatch);

You are then able to either use getFirebase() or reference the exported firebase instance e.g. sagaMiddleware.run(rootSaga, firebase).

[georgeMorales]

I have updated to version 3.04 and I get this error: (0, _reactReduxFirebase.reactReduxFirebase) is not a function. (In '(0, _reactReduxFirebase.reactReduxFirebase) (_ firebase.default, rrfConfig)', '(0, _reactReduxFirebase.reactReduxFirebase)' is undefined)
configureStore
configureStore.js: 31: 25
I am using firebase sdk and not RNFirebase because I use Expo
My Store is:
`
import { createStore, applyMiddleware, compose } from 'redux';
import { reactReduxFirebase, getFirebase } from "react-redux-firebase";
import { reduxFirestore, getFirestore } from "redux-firestore";
import thunk from 'redux-thunk';
//import applyAppStateListener from 'redux-enhancer-react-native-appstate';
import rootReducer from '../reducers/rootReducer';
import firebase from '../config/firebase';

const rrfConfig = {
enableRedirectHandling: false, // required for react native
userProfile: "users", // where profiles are stored in database
attachAuthIsReady: true, // attaches auth is ready promise to store
useFirestoreForProfile: true,
updateProfileOnLogin: false,
logErrors: false,
};

export const configureStore = preloadedState => {
const middlewares = [thunk.withExtraArgument({ getFirebase, getFirestore })];
const middlewareEnhancer = applyMiddleware(...middlewares);

const storeEnhancers = [middlewareEnhancer];

const composedEnhancers = compose(
  ...storeEnhancers,
  reactReduxFirebase(firebase, rrfConfig),
  reduxFirestore(firebase)
);

const store = createStore(
    rootReducer, 
    preloadedState, 
    composedEnhancers,

);
return store;

};
`

[Peeeep]

@JorgeMoralesLopez v3 doesn't support reactReduxFirebase any more, see v3 migration guide and getting started section in the docs.