Search code examples
react-native-firebasereact-redux-firebase

react-native-firebase vs react-redux-firebase?


Background: I have started using react-native-firebase with react-native to integrate with Cloud Firestore. I'm going to start bringing redux into my test application.

Question - Is react-native-firebase ok to continue with as my choice of libraries here? (versus migrating to react-redux-firebase)

Is there an easy way to sum up the difference between the two libraries re when you would you one versus the other? I note with react-native-firebase the installation is quite involved for IOS and Android, so I'm not sure whether react-redux-firebase makes this easier, but if it does do you lose anything in mix?


Solution

  • Main difference:

    • react-redux-firebase - for using Firebase with Redux
    • react-native-firebase - for using Firebase JS API with react-native

    react-redux-firebase actually supports using react-native-firebase. react-native-firebase provides the Firebase JS API while using native-modules under the hood, meaning you can provide that as your Firebase instance to react-redux-firebase like so:

    import { compose, createStore } from 'redux';
    import RNFirebase from 'react-native-firebase';
    import { getFirebase, reactReduxFirebase } from 'react-redux-firebase';
    import thunk from 'redux-thunk';
    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;
    };
    

    This setup and more is covered in the react-native recipes section of the docs.

    Disclaimer: I am one of the authors of react-redux-firebase