Tutorial 2a: How to add CRUD operations to your React Native app using React Hooks and Redux

Demo

Tutorial

• Step 5: Create the Actions
• Step 6: Create the Reducer

FOLLOW Step 1 to 3 in Tutorial 1c(Don't create the instructions.json file, create a sample.json file instead)

Step 4: Create Sample Data

You can either create a local json file with your sample data or use the Axios package to make an api request to https://my-json-server.typicode.com/mesandigital/demo/quotes to access the data.

Step 5: Create the Actions

ADD_QUOTE
This action is the CREATE operation, the new quote is passed to the addQuote function.

QUOTES_AVAILABLE
This action will act as the READ operation, the quotes are passed to the addQuotes function.

UPDATE_QUOTE
This action is the UPDATE operation, the updated quote is passed to the updateQuote function. 

DELETE_QUOTE
This action is the DELETE operation, the deleted quote id is passed to the deleteQuote function.

Step 5: Create the Reducer

ADD_QUOTE
The state 'quotes' variable is cloned and the new quote is pushed to the top of the cloned object, the state 'quotes' variable is replaced with the clone object.

QUOTES_AVAILABLE
The state 'quotes' variable is updated with the quotes array dispatched to the reducer.

UPDATE_QUOTE
The state 'quotes' variable is cloned, the id of the quote dispatched to the reducer is used to find the index of the quote in the cloned object.  The quote at that index is replaced with the quote dispatched to the reducer. The state 'quotes' variable is replaced with the clone object.

DELETE_QUOTE
The state 'quotes' variable is cloned, the id dispatched to the reducer is used to find the index of the quote in the cloned object. The quote at that index is removed and the state 'quotes' variable is replaced with the clone object.

FOLLOW Step 7 in Tutorial 1c to create the Redux Store.

The rest of the tutorial is available on my blog.