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.
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
…