React Hooks + Redux: CRUD example with Axios and Rest API
Tags: react, redux, webdev, todayilearned
Published: 2021-04-07 04:23:42

In this tutorial, I will show you how to build a React Redux Hooks + Axios example by a CRUD Application to consume Rest API.

Full Article: [https://bezkoder.com/react-hooks-redux-crud/](https://bezkoder.com/react-hooks-redux-crud/)

<h2><span id="Overview">Overview of React Hooks Redux CRUD example</span></h2>
We will build a React Redux Tutorial Application with Rest API calls in that:
<ul>
	<li>Each Tutorial has id, title, description, published status.</li>
	<li>We can create, retrieve, update, delete Tutorials.</li>
	<li>There is a Search bar for finding Tutorials by title.</li>
</ul>

Here are screenshots of our React Redux CRUD Application.

- Create a Tutorial:

![react-hooks-redux-crud-example-create-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c31pc58v32gck8v21ps6.png)

- Retrieve all Tutorials:

![react-hooks-redux-crud-example-retrieve-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h826sn91cudi03d3xkg6.png)

- Click on <strong>Edit</strong> button to update a Tutorial:

![react-hooks-redux-crud-example-retrieve-one-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02hm379d9k0b1yi75kw8.png)

On this Page, you can:
<ul>
	<li>change status to <strong>Published</strong> using <strong>Publish</strong> button</li>
	<li>delete the item using <strong>Delete</strong> button</li>
	<li>update the item details with <strong>Update</strong> button</li>
</ul>

![react-hooks-redux-crud-example-update-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckqj1j2oz1iegh3pmxko.png)

- Search Tutorials by title:

![react-hooks-redux-crud-example-search-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sr7q1nqkgij5fjg5v8mt.png)

- Check Redux State with Dev-tool:

![react-hooks-redux-crud-example-check-redux-state](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxo1gsp8tk10iacxvanq.png)

This React Client consumes the following Web API:
<div class="table-responsive">
<table class="table table-hover  table table-hover" width="100%">
<thead>
<tr>
<th>Methods</th>
<th>Urls</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>POST</td>
<td>/api/tutorials</td>
<td>create new Tutorial</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials</td>
<td>retrieve all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials/:id</td>
<td>retrieve a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>PUT</td>
<td>/api/tutorials/:id</td>
<td>update a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>/api/tutorials/:id</td>
<td>delete a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>/api/tutorials</td>
<td>delete all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials?title=[keyword]</td>
<td>find all Tutorials which title contains <code>keyword</code></td>
</tr>
</tbody>
</table>
</div>

You can find step by step to build a Server like this in one of these posts:
- <a href="https://bezkoder.com/node-js-express-sequelize-mysql/">Express, Sequelize & MySQL</a>
- <a href="https://bezkoder.com/node-express-sequelize-postgresql/">Express, Sequelize & PostgreSQL</a>
- <a href="https://bezkoder.com/node-express-mongodb-crud-rest-api/">Express & MongoDb</a>
- <a href="https://bezkoder.com/spring-boot-jpa-crud-rest-api">Spring Boot & MySQL</a>
- <a href="https://bezkoder.com/spring-boot-postgresql-example/">Spring Boot & PostgreSQL</a>
- <a href="https://bezkoder.com/angular-spring-boot-mongodb/">Spring Boot & MongoDB</a>
- <a href="https://bezkoder.com/spring-boot-jpa-h2-example/">Spring Boot & H2</a>
- <a href="https://bezkoder.com/spring-boot-cassandra-crud/">Spring Boot & Cassandra</a>
- <a href="https://bezkoder.com/django-crud-mysql-rest-framework/">Django & MySQL</a>
- <a href="https://bezkoder.com/django-postgresql-crud-rest-framework/">Django & PostgreSQL</a>
- <a href="https://bezkoder.com/django-mongodb-crud-rest-framework/">Django & MongoDB</a>

<h2><span id="Component_Diagram">React Hooks Redux CRUD Component Diagram with Router &#038; Axios</span></h2>
Now look at the React components that we're gonna implement:

![react-hooks-redux-crud-example-components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpm5zhridly1x99r5z7i.png)

– The <code>App</code> component is a container with React <code>Router</code>. It has <code>navbar</code> that links to routes paths.

– Three pages that dispatch <strong><em>actions</em></strong> to <code>Redux Thunk Middleware</code> which uses <code>TutorialDataService</code> to call Rest API:
<ul>
	<li><code>TutorialsList</code> gets and displays Tutorials.</li>
	<li><code>Tutorial</code> has form for editing Tutorial's details based on <code>:id</code>.</li>
	<li><code>AddTutorial</code> has form for submission new Tutorial.</li>
</ul>

– <code>TutorialDataService</code> uses <code>axios</code> to make HTTP requests and receive responses.

<h2><span id="React_Redux_API">React Hooks + Redux with API example</span></h2>
This diagram shows how Redux elements work in our React Hooks Application:

![react-hooks-redux-crud-example-redux-store](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vvje4vvurrkfhsyk906.png)

We're gonna create Redux <code>store</code> for storing <code>tutorials</code> data. Other React Components will work with the Store via dispatching an <code>action</code> or getting value using React-Redux Hooks API.

The <code>reducer</code> will take the action and return new <code>state</code>.

<h2><span id="Technology">Technology</span></h2>
<ul>
	<li>React 17/16</li>
	<li>react-redux 7.2.3</li>
	<li>redux 4.0.5</li>
 	<li>redux-thunk 2.3.0</li>
	<li>react-router-dom 5.2.0</li>
	<li>axios 0.21.1</li>
	<li>bootstrap 4</li>
</ul>

<h2><span id="Project_Structure">Project Structure</span></h2>
![react-hooks-redux-crud-example-project-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rssb5a0zw6w9ay7rqfn2.png)

I'm gonna explain it briefly.

- <strong>package.json</strong> contains main modules: <code>react</code>, <code>react-router-dom</code>, <code>react-redux</code>, <code>redux</code>, <code>redux-thunk</code>, <code>axios</code> & <code>bootstrap</code>.
- <code>App</code> is the container that has <code>Router</code> & navbar.
- There are 3 pages: <code>TutorialsList</code>, <code>Tutorial</code>, <code>AddTutorial</code>.
- <strong>http-common.js</strong> initializes axios with HTTP base Url and headers.
- <code>TutorialService</code> has methods for sending HTTP requests to the Apis.
- <strong>.env</strong> configures <em>port</em> for this React CRUD App.

About Redux elements that we're gonna use:
- <strong>actions</strong> folder contains the action creator (<em>tutorials.js</em> for CRUD operations and searching).
- <strong>reducers</strong> folder contains the reducer (<em>tutorials.js</em>) which updates the application state corresponding to dispatched action.

For step by step and Github, please visit:
[https://bezkoder.com/react-hooks-redux-crud/](https://bezkoder.com/react-hooks-redux-crud/)

Using Redux-Toolkit:
[Redux-Toolkit CRUD example with React Hooks](https://www.bezkoder.com/redux-toolkit-crud-react-hooks/)

## Further Reading
Security:
- <a href="https://bezkoder.com/react-hooks-jwt-auth/">React Hooks: JWT Authentication (without Redux) example</a>
- <a href="https://bezkoder.com/react-hooks-redux-login-registration-example/">React Hooks + Redux: JWT Authentication example</a>

Related Posts:
- <a href="https://bezkoder.com/react-crud-web-api/">React CRUD example with Axios and Web API (using React Components)</a>
- <a href="https://bezkoder.com/react-hooks-file-upload/">React Hooks File Upload example with Axios & Progress Bar</a>
- <a href="https://bezkoder.com/react-table-example-hooks-crud/">React Table example: CRUD App | react-table 7</a>

Serverless with Firebase:
- <a href="https://bezkoder.com/react-firebase-hooks-crud/">React Hooks + Firebase Realtime Database: CRUD App</a>
- <a href="https://bezkoder.com/react-hooks-firestore/">React Hooks + Firestore example: CRUD app</a>

Fullstack:
- <a href="https://bezkoder.com/react-spring-boot-crud/">React + Spring Boot + MySQL: CRUD example</a>
- <a href="https://bezkoder.com/spring-boot-react-postgresql/">React + Spring Boot + PostgreSQL: CRUD example</a>
- <a href="https://bezkoder.com/react-spring-boot-mongodb/">React + Spring Boot + MongoDB: CRUD example</a>
- <a href="https://bezkoder.com/react-node-express-mysql/">React + Node.js + Express + MySQL: CRUD example</a>
- <a href="https://bezkoder.com/react-redux-mysql-crud/">React Redux + Node.js + Express + MySQL: CRUD example</a>
- <a href="https://bezkoder.com/react-node-express-postgresql/">React + Node.js + Express + PostgreSQL example</a>
- <a href="https://bezkoder.com/react-node-express-mongodb-mern-stack/">React + Node.js + Express + MongoDB example</a>
- <a href="https://bezkoder.com/django-react-hooks/">React + Django + Rest Framework example</a>

Dockerize:
- [Docker Compose React + Node.js Express + MongoDB example](https://www.bezkoder.com/docker-mern/)
- [Docker Compose React + Node.js Express + MySQL example](https://www.bezkoder.com/docker-compose-react-nodejs-mysql/)