How to Integrate React Redux and Firebase in 3 Simple Steps

In this article you’ll learn how to:

• Create simple UI for the application using React
• Attach Redux store to the React application
• Connect Firebase realtime database with Redux store
• Combine these 3 things to create fully functional To-Do application

Before we dive into these 3 pillars. Here is how the flow of the application will look like. Our component will trigger an action. This action will do some request on Firebase real-time database. Then data from Firebase will go to our reducer. From reducer to store. And from store component can access the data. Nothing fancy, but it gets the job done.

Application flow integrating Firebase

Creating simple user interface

We’re gonna use create-react-app package to generate our boilerplate. If you don’t have it yet just run npm install -g create-react-app. After that go to the directory where you want your project to be located and run create-react-app react-redux-firebase or any name you find suitable. Inside src directory remove the unnecessary files. Leave only index.js…