Tutorial 2: React Native Redux with CRUD operations
UPDATE: An updated version of this tutorial using React Hooks is NOW available HERE
Update March 5 2018: Refactored Code
In the previous tutorial, we created a basic React Native app that uses Redux to display information stored in the Redux store, our data was stored in a json file that was accessed every time the getData function is called. For this tutorial, I will be transforming the app to a Quotes app, that allows the user to add, view, update and delete quotes, in order to achieve this, I will be adding CRUD operations.
Unlike the previous tutorial, our data will be stored in React Native AsyncStorage, the initial/sample data will be extracted from a json file.
Step 1: Install Packages
We will be using the React Native Router for our apps navigation. We will be using React Native Keyboard Spacer to handle the keyboard.
Step 2: Set up navigation
Create a new file app/index.js and paste the code below. This file will be the new entry point into our app.
Here, we set up our Router and Scenes, check React Native Router repo for more information about the basic setup. For the app, we have created 2 scenes, the first is Home, this is the main scene that displays our quotes in a listview, the second is the New Quote scene which is used for adding and updating quotes.
Every time we run the app, we want to check if the “data” key exist in the AsyncStorage, if it doesn’t, we want to extract the initial/sample data from our json file and save it in our AsyncStorage. This check is done in the componentDidMount function.
Update the App.js file to ensure app/index.js is the entry point into our app.
Step 3: Create our json file
Create a new file quotes.json in the root folder, this will be our initial data.
Step 4: Write CRUD functions
Next, we will write out our CRUD functions, we will be updating our actions/index.js. Update the file with the code below.
For each operation, we access the AsyncStorage to retrieve the data, the data is then updated and the new data is saved in the AsyncStorage and then passed to the reducer in order to update the Redux store, this happens in all operations excluding the READ operation in which no new data has to be saved to the AsyncStorage.
Next, we will update the reducers/index.js file to reflect and respond to the new actions dispatched to it.
ADD_QUOTE
This action is our CREATE operation, when a new quote is added, it is passed to the reducer. First, we create a clone of the quotes array in our state, then we push the new quote to the top of the cloned object and then update the state by passing it our updated cloned object.
QUOTES_AVAILABLE
This action is our READ operation, when our quotes are retrieved from the AsyncStorage, they are passed to the reducer, this action updates the quote array in our state with the passed data.
UPDATE_QUOTE
This action is our UPDATE operation, when one of the quotes is updated, the AsyncStorage is updated and the quote is then passed to the reducer. The reducer clones the quotes array in our state and uses the quote id to find the index of the quote in the array, the index is then used to retrieve the quote to be updated and the author and quote indexes for the quote is updated. The cloned array which is then passed back to the state.
DELETE_QUOTE
This action is our DELETE operation, when one of the quotes is deleted, it is removed from our AsyncStorage and the deleted quote id is passed to the reducer. The reducer clones the quotes array in our state and uses the quote id to find the index of the quote in the quotes array, the quote in that index is removed from the cloned array which is then passed back to the state.
Step 5: Create and update our views
Create new_quote.js in the components folder, this view is used for adding and updating quotes, It has 2 text inputs, one for the author and the other for the quote and a button. When the user presses the save button a unique id is generated for the new quote, the id, along with the author and quote is then passed to the addQuotes function in our actions/index.js
Next, we will update our home.js file in the components folder, the view contains a listview for displaying our quotes, a floating button for adding new quotes and uses React Native ActionSheetIOS for displaying the Edit and Delete option when the user taps one of the quotes.
Thats all folks!
Originally published at mosesesan.com on July 1, 2017.
