Stop using ReactFire in your React-Redux App — Part 1

You are wondering why I said to stop using ReactFire, though it is the official library to integrate the Firebase in your React project.

Before I explain you the reasons of not to use ReactFire in your awesome React app checkout the data flow anatomy with or without ReactFire.

Data flow between React App and Firebase with ReactFire

In the above flow chart, data is flowing directly through ReactFire into your app and the Redux doesn’t have any idea about the current data inside your react app.

As we already know, Redux should be the source of maintaining the data inside your app otherwise sole purpose of using Redux in the app will be faded out. Also, it’s hard to predict the state of your app in any given point of time.

Data flow between React App and Firebase without ReactFire

In this flow, React app is not directly communicating with the Firebase instead Redux owns the relationship with firebase and acts as a mediator between Firebase and your react app.

So, what’s the benefits ?

We are injecting data from Firebase to Redux. In this approach, Redux is responsible for handling Ajax or any 3rd party requests to fetching or updating relevant data and passing down to our app.

Key benefits are:

• Maintain the Redux as single source of truth for data inside the app.
• Update the data inside the app in predictable fashion, etc.

We have discussed problem and solution so far in the theoretical fashion.

Yay!

But, how exactly we will be going to implement this in React.

Do you want to know ? If yes, Hit Clap 👏

Cheers,