React Redux example with API calls: Build a CRUD app
Tags: react, redux, webdev, todayilearned
Published: 2021-04-04 03:51:01

In this tutorial, I will show you how to build a React Redux example to with API calls to consume Rest API by a CRUD Application. You also can display and modify data with Router, Axios & Bootstrap.

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

<h2><span id="Overview">Overview of React Redux example with API calls</span></h2>
We will build a React Redux Tutorial Application with 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 an item:

![react-redux-example-api-calls-axios-create-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0d1ibr84417uykqnzn2.png)

- Retrieve all items:

![react-redux-example-api-calls-axios-retrieve-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4j3v6ffxou29cozetm6.png)

- Click on <strong>Edit</strong> button to update an item:

![react-redux-example-api-calls-axios-retrieve-one-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjuwkvuksgh5irk7j1b1.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-redux-example-api-calls-axios-update-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7jepbzxy2n4pdpkijp6.png)

- Search Tutorials by title:

![react-redux-example-api-calls-axios-search-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52xgi00k6acutfuxh1hq.png)

- Redux Store:

![react-redux-example-api-calls-axios-store](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t05ghtj2lmxobsx9xuw8.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 Redux App Component Diagram with Router &#038; Axios</span></h2>
Now look at the React components that we're gonna implement:

![react-redux-example-api-calls-axios-components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/347v4as5airgacynblnr.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 components 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> component gets and displays Tutorials.</li>
	<li><code>Tutorial</code> component has form for editing Tutorial's details based on <code>:id</code>.</li>
	<li><code>AddTutorial</code> component 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 Redux with API Calls example</span></h2>
This diagram shows how Redux elements work in our React Application:

![react-redux-example-api-calls-axios-redux-store-architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mim8fo3rugnupw8p6l4o.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>.

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

Using Redux Toolkit instead:
[Redux-Toolkit example](https://www.bezkoder.com/redux-toolkit-example-crud/)

<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-redux-example-api-calls-axios-project-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lctzp43sin5vhytn5g3.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 components: <code>TutorialsList</code>, <code>Tutorial</code>, <code>AddTutorial</code>.
- <strong>http-common.js</strong> initializes axios with HTTP base Url and headers.
- <code>TutorialDataService</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.

More steps and Github source code at:
[https://bezkoder.com/react-redux-crud-example/](https://bezkoder.com/react-redux-crud-example/)

If you want to use Redux-Toolkit instead, kindly visit:
<a href="https://www.bezkoder.com/redux-toolkit-example-crud/">Redux-Toolkit example with CRUD Application</a>

Or you can add Pagination Component:
<a href="https://bezkoder.com/react-pagination-material-ui/">React Pagination with API using Material-UI</a>

![react-redux-example-api-calls-axios-pagination](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77jkvh5e46kozk9agt1l.png)

# Further Reading
Related Posts:
- <a href="https://bezkoder.com/react-file-upload-axios/">React File Upload with Axios and Progress Bar to Rest API</a>
- <a href="https://bezkoder.com/react-redux-jwt-auth/">React Redux: JWT Authentication example</a>

Serverless:
- <a href="https://bezkoder.com/react-firebase-crud/">React Firebase CRUD with Realtime Database</a>
- <a href="https://bezkoder.com/react-firestore-crud/">React Firestore CRUD App example | Firebase Cloud Firestore</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/)