What I learned trying to connect Firebase to an app with React and Redux
Tags: react, redux, firebase, javascript
Published: 2018-05-14 12:02:29

---
title: What I learned trying to connect Firebase to an app with React and Redux
published: true
description: Lessons from my side open source project
tags: #react #redux #firebase #javascript
---

## Intro


I have a very particular problem that I'm trying to solve with software. If you've read *The seven habits of highly effective people*, is something to organize my week according to the third habit. I'll make a post once I have something with the most essential features so you can try out.

Originally, it was supposed to be an app that would be served by a static server and living on the client all time. 

Once I had most of the app made and started to learn `GraphQL`. This made me realize that I could get more value from it if I could bind it to my Google Account and access my data from any device.

This should probably be obvious for most people, for me it wasn't.



## Less is more

I work as a Front End Developer so I didn't want to setup a server, Docker containers, micro-services and all those features that make an app quite secure, ultra-performant, scalable, etc.

As I told you in the intro, it is a personal project. So I decided to try Firebase hosting and backend as a service, for hosting, 

* Hosting. Firebase.
* Real time database. Firebase.
* User management, just sign in with Google. No email and password.
* **GraphQL** side of things. Firebase. I just need a server-less setup with some functions and NodeJS.

## Begin with the end in mind
I spent one day after following the documentation trying to plug this library *so I could get Firebase, React and Redux playing together*. That was the goal, right? 

I ended up with a big mess. I started to review my code carefully, the problems were: 

* I had injected a `reducer` with lost of features that were neither needed nor used.
* I initialized my app twice.
* For some reason, I was trying to reference the app initialization in order to get the Authentication.
* I was running `react-redux-firebase` getters with my sagas without needing them. 

I started to wonder *Do I even need this?*, Why?.

## Do one thing at a time
I'm quite proficient with `react`, `redux`, `redux-saga`, `react-router`, etc. There are many little-parts, playing together. For the most part, you start with small and add each feature as you need them.

I have done this before, several times. I really understand the basics and what each part is doing.

As you might have realized, Firebase provides you with a lot of solutions. The problem was that I found a library that looked like what I was looking for and 
tried to implement them all at once. 

The library is [`react-redux-firebase`](http://react-redux-firebase.com/), I eventually discovered that I didn't even need it. 


## Simplicity is always better
Frustrated and curious, after reviewing several sources. I decided to remove all things that I did not needed, then to one thing at a time. It was simpler and easier than I expected. Here is the list of things I need to do in order: 

* Hosting setup. 
* Save the configuration somewhere in the repo.
* Enable Google Authentication in Firebase console.
* Create Sign in page component.
* `MapDispatchToProps` in order to execute with a click the proper action.
* Watch that action in a `watcherSaga`.
* Within the worker saga, Open Google Auth popup and handle response.

## Conclusion
For someone that understands High order components, JWT, ES6 Generators and Observables. This is a funny position to be in.

Things are easier to explain once you understand them. There is always something new to learn and despite the initial frustration, it was a great learning experience.

If you want me to write a post with a step by step guide about how to do what I describe in this post, please let me know.


## Further Resources
* [Firebase Hosting](https://firebase.google.com/docs/hosting/?authuser=0)
* [Adding Firebase](https://firebase.google.com/docs/web/setup)
* [Redux Saga](https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html)
* [Authenticate Using Google Sign-In with JavaScript](https://firebase.google.com/docs/auth/web/google-signin)