Firebase Tutorial episode #1
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.
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
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
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
Time to “rewrite” logic
Now, when you’ve successfully updated your app, created your actions and reducers and did some
!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
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
Finish the actions by almost copy-pasting the event handler functions from App.js to your actions and you are done.
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.
check out the full code here: https://github.com/benestudio/fakestagram/tree/redux
Register to our next workshop!
Subscribe to our newsletter, and we will provide you more practical tips regarding mobile development:
Bene studio HQ
Andrássy út 66., 1062 Budapest
+36 70 682 9425