How to build a React Native App using Firebase. (Part 5) (CRUD)
Please note that this tutorial assumes you have some JavaScript or React Native experience, this tutorial does not explain each line of the code instead it presents you with the code and gives you an overview of what the code does and points out the important parts of the code. I have made the code as simple as possible, if you have any questions, please do not hesitate to leave a comment.
In Part 4, we added Facebook login. In this tutorial, we will add the ability to Add New Quotes ©, View All Quotes (R), Update Quotes (U) and Delete Quotes (D).
Now, that we have gotten that out of the way, LET THE CODING BEGIN!
Step 10: Backend (Firebase, Actions, Reducer)
API (Firebase)
In the home module folder, update api.js file. In this file, we will be creating several functions that interacts with the Firebase API to carry out our CRUD operations.
The addQuote function takes in the new quote data and a callback function as parameters, it uses the push() method to create a new reference in the node containing all quotes, we use the key of the newly created reference as the quote id.
Next, we create a new object, in this object we create 2 paths, one references the path of our new quote while the other references the path that would store the quote for the signed in user, using the users id and the key of the newly created reference, the path is constructed using the key of the newly created reference and the current user userId which we extract from the data passed to the function.
Having created this path, we can simultaneously update the data in both locations using the update() function.
For better understanding, take a look at the example and explanation at https://firebase.google.com/docs/database/web/read-and-write#update_specific_fields
The getQuotes function takes in a callback function as parameter, it then uses the on() method to retrieve all quotes from the “quotes” node and also sets up the listener to listen for any changes that occurs in the “quotes” node.
The listener returns snapshot containing the data, this snapshot is then passed to our callback function.
The updateQuote and deleteQuote functions are very similar to the addQuote function except a new reference need not be created, instead the id of the quote, i.e, the reference key created when adding is extracted and used to carry out the updates.
When deleting a quote, the deleteQuote sets the values of the paths to null. This deletes that node in turn deleting our quote.
The last function toggleLove function, takes care of the liking and unliking of quotes. Using a transaction, we are able to ensure the like count is always accurate even in the situation where multiple users are liking the same quote at the same time.
For more information on Firebase Transaction, read the example and explanation at: https://firebase.google.com/docs/database/web/read-and-write#save_data_as_transactions
Actions
Before we create our actions, we will declare the action types to be used, in the home module folder, update actionTypes.js file
In the home module folder, update actions.js file. Each function in our actions file is in charge of calling the appropriate API function and dispatching the right action based on the response returned.
Take note that only the getQuotes function actually dispatches anything to our reducer, this is because we are using Firebase Realtime functionality and we have set up our listener in our getQuotes function in the api file.
The listeners callback will be triggered every time a new change/event occurs in our “quotes” node, this changes/events includes the adding of new data, the updating and deleting of current data.
Reducer
In the home module folder, update reducer.js file. It’s up to the reducer to decide if it needs to modify the app state or not based on the action dispatched to it.
LOADING_QUOTES
This action sets the isLoading state variable to true ONLY if the quotes state variable is empty, this allows us to display the Activity Indicator in our view to indicate the quotes is being retrieved.
QUOTES_AVAILABLE
This action is our READ operation, Firebase returns its data as a snapshot, the first thing we do is create an empty array that would hold our quotes, next we convert the snapshot into a JSON object by looping through each item in the snapshot and pushing it to our quotes array. Lastly, we reverse the quotes array so the most recent quote is at the top of the array.
LOGGED_OUT
This empties the quotes state variable when the user logs out.
Step 11: Frontend (Components, Utils, Scenes and Styles)
Step 11a: Components
Quote
In the home/components folder, create the Quote folder and create Quote.js, index.js and styles.js file in that folder and paste the code below.
This is the component for each quote, It has as 3 Text component, one for displaying the quote text, the other for displaying the user’s name and the last one shows the published time.
It also has two buttons, one for liking/unliking the quote, the other for showing the Edit/Delete options. I suggest reading through the quotes to fully understand what this component does, having an understanding of what is going on in the code will make it easier for you to modify the code to meet your own needs.
NavButton
In the app/components folder, create the NavButton folder and create NavButton.js, index.js and styles.js file in that folder and paste the code below.
SaveButton
In the home/components folder, create the SaveButton folder and create SaveButton.js, index.js and styles.js file in that folder and paste the code below.
This component will appear on the right side of our Navigation bar in the Add Quotes view, this button calls the addQuote/updateQuote functions located in the actions.js file.
Step 11b: Scenes
Home
In the scenes/Home directory, update the Home.js, index.js and styles.js files.
New Quote
In the home/scenes directory, create the NewQuote directory and create NewQuote.js, index.js and styles.js files in that folder and paste the code below.
Step 12: Wrap Up
Routes
In the app/config folder, update the routes.js file. In our update, we are adding the NewQuotes scene with two Navigation bar buttons (close and save). We are also adding a navigation bar button to the Home scene, this will be for triggering the NewQuotes view.
Now we are ready to test our app. If possible, try testing the app with two phones, that way you can see the realtime update of the quotes list. Anyway….
Thats all folks!
Related Tutorials
- Tutorial 1: React Native Redux Boilerplate
- Tutorial 2: React Native Redux with CRUD operations
- How to build a React Native App using Firebase. (Part 1) (Setup)
- How to build a React Native App using Firebase. (Part 2) (Backend)
- How to build a React Native App using Firebase. (Part 3) (Frontend)
- How to build a React Native App using Firebase. (Part 4) (Facebook Login)
