What I learned trying to connect Firebase to an app with React and Redux

#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, 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.