Firebase Tutorial episode #1

FEATURED

by | 20 Dec

Kickstart your React Native app with Firebase - Redux (Tutorial #3)

In this series we will create an iOS and Android application - called Fakestagram - with React Native, using some of Firebase services. This is not an “intro to React Native” tutorial so we won’t cover basic things, but only Firebase specific topics, so you will need some React Native and Redux knowledge to keep up with the pace.

At bene : studio we use this JavaScript stack to build high-quality mobile and web applications, delivering superb digital services for our partners.

Today, in Ep. 3, we will start to manage our application’s state with the popular Redux library. If you want to read the previous articles, go to Episode #1, checkout Episode #2 and the intro article is here: Episode #0

Standup

On the previous article we updated our application with a user authentication feature, created a login screen, and changed the database security rules to only registered users are able to populate the db with our magic “Add random” button. Today we take a step back from the Firebase Console and other Firebase things, but update our application state management with Redux, before starting the integration of new features.

getting started with redux

In a brief introduction, Redux is a predictable state management solution for your applications. Not necessary to use React for it, but it has bindings in react-redux package. The basics of the concept is similar to the Flux architecture, but it has many advantages. You can learn about them here: https://redux.js.org/

So, back on track: First, you need to install the necessary dependencies from yarn or npm. It’s your choice. But I’d recommend you to stick to your previous package manager.

All packages we want to use.

Now, let’s create a store and the base reducers and actions to handle our apps authentication and data. We create store.js inside our src/config folder. Here let’s create a store with our root reducer and redux-thunk middleware. We push the redux-logger to our middleware array in development stage. After that, create a persistor to save and rehydrate our data using asyncStorage, and wrap all of them to redux-devtools-extension’s development only mode to give us some really exciting opportunity to debug our app.

Create Redux store, store.js code snippet – view raw

Now, create the basic actions and reducers and do some refactor while connecting our app to the Redux store. Use Provider from react-redux to provide React bindings to easily update our components state when dispatching Redux actions. And use PersistGate from redux-persist to do some actions while you are waiting for the store to rehydrate.

Refactored index.js to connected app, view raw

Auth reducer, view raw

Fully implemented redux store, base actions, reducers, connected and refactored components to work with, here: https://github.com/benestudio/fakestagram/tree/bbc68a0ff57ffff9aa9beec415c8ed752c5e1a9d

State diff between logged out and logged in + downloaded posts states.

Time to “rewrite” logic

 

Now, when you’ve successfully updated your app, created your actions and reducers and did some refactor, it’s time to write the Redux logic into your actions to update the store with them using those reducers. Are you ready? Let’s go.

!Starting out from the previously linked commit!

So the only thing we need to do is just a little refactor, that our App component only uses this.state to the Login text field values. We need to separate all of our event handling logics to the Redux actions and instead of this.setState() let the reducers handle the hard work. 🙂

In our refactored App.js the handler functions are only responsible to dispatch the proper redux action, except the input fields onChange function. It handles the components state, because only this component needs access to TextInputs values. The lifecycle methods are nearly untouched.

Final version of App.js, view raw

Finish the actions by almost copy-pasting the event handler functions from App.js to your actions and you are done.

Next up

That’s all for today. You don’t need anything else to use Redux for one single source of truth and get your app ready to be easier to manage when it will be more complex one day. If you want, you can clone the example repo with the UI implemented and checkout the code. Would you like to add something? Or you have any questions? Just write a comment.

This article is written by bene : studio team, the React and React Native specialists. We are a software engineering agency from Budapest, Hungary delivering superb digital services.

JOIN OUR TEAM OF HIGHLY SKILLED ENGINEERS WHO ALL PASSED THE FAMOUSLY CHALLENGING BENE : STUDIO ASSESSMENT!

Register to our next workshop!

Want to ask some questions? Share them with us via e-mail to partner@benestudio.co and we can set up a talk with our engineers.

Follow us on our channels to keep in touch:

Facebook
Twitter
LinkedIn
Instagram

Subscribe to our newsletter, and we will provide you more practical tips regarding mobile development:

Meet us

Bene studio HQ

Andrássy út 66., 1062 Budapest
partner@benestudio.co
+36 70 682 9425

We’d like to chat With You!