@react-native-firebase integration with react-redux-firebase V3

Question

Does anyone know how to integrate @react-native-firebase with react-redux-firebase V3 ?

I have installed react-native-firebase following this tutorial https://rnfirebase.io/

  "dependencies": {
    ...
    "@react-native-firebase/app": "^12.1.0",
    "@react-native-firebase/auth": "^12.1.0",
    "@react-native-firebase/firestore": "^12.1.0",
    ...
  },

The git code how to implement react-redux-firebase with react-native seems to be deprecated as it still using the V2

The documentation on the website :

• use firebase without importation when configuring the store ?
• use import from 'react-redux-firebase' and not '@react-redux-firebase/...' (what is the difference ?)

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

...

// Initialize firebase instance
firebase.initializeApp(fbConfig)

Does anyone know how to integrate correctly @react-native-firebase with react-redux-firebase V3 ?

Answer 1

Here is the solution,

You will need to import modules like this and also retrieve an instance of firebase with the app() function.

Here is my configStore file

import {createStore, applyMiddleware, compose} from 'redux';
import rootReducer from '../Redux/Reducers/rootReducer';
import middlewares from '../Redux/Middleware/middleware';
import {createFirestoreInstance} from 'redux-firestore'; // <- needed if using firestore
import {persistReducer, persistStore} from 'redux-persist';
import rrfConfig from '../Redux/Config/reactReduxFirebaseConfig';
import persistConfig from '../Redux/Config/persistConfig';

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

import RNfirebase from '@react-native-firebase/app';
const firebase = RNfirebase.app(); // <-- Retrieve an instance of a FirebaseApp.

// persist reducer in storage
const persistedReducer = persistReducer(persistConfig, rootReducer);

// Create store with reducers
const store = createStore(
  persistedReducer,
  compose(applyMiddleware(...middlewares)),
);

// react-redux-firebase props
export const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance, // <- needed if using firestore
};

export const persistor = persistStore(store);

export default store;