Spring Boot + React Redux example
Tags: react, spring, webdev, todayilearned
Published: 2021-04-08 04:10:26

In this tutorial, we will learn how to build a full stack React Redux + Spring Boot example with a CRUD App. The back-end server uses Spring Boot with Spring Web MVC for REST APIs and Spring Data JPA for interacting with embedded database (H2 database). Front-end side is made with React, Redux, React Router, Axios & Bootstrap.

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

<h2>Spring Boot React Redux example Overview</h2>
We will build a full-stack Spring Boot & React Redux Tutorial Application in that:
<ul>
	<li>Each Tutorial has id, title, description, published status.</li>
	<li>We can create, retrieve, update, delete Tutorials.</li>
	<li>We can also find Tutorials by title.</li>
</ul>

The images below shows screenshots of our System.

- Create a Tutorial:

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

- Retrieve all Tutorials:

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

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

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

On this Page, you can:
<ul>
	<li>change status to <strong>Published</strong> using <strong>Publish</strong> button</li>
	<li>remove the Tutorial from Database using <strong>Delete</strong> button</li>
	<li>update the Tutorial details on Database with <strong>Update</strong> button</li>
</ul>

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

- Search items by title:

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

<h2>Architecture of Spring Boot React Redux example</h2>
This is the application architecture we're gonna build:

![spring-boot-react-redux-example-crud-architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6yyf7owp3h5si5gs63b.png)

- Spring Boot exports REST Apis using Spring Web MVC & interacts with embedded H2 Database using Spring JPA
- React Client sends HTTP Requests and retrieves HTTP Responses using <em>Axios</em>, consume data on Redux which provides state to the Components. React Router is used for navigating to pages.

You can also find the Spring Restful Apis that works with other databases here:
\- <a href="https://bezkoder.com/spring-boot-postgresql-example/">Spring JPA + PostgreSQL</a>
\- <a href="https://bezkoder.com/spring-boot-jpa-crud-rest-api/">Spring JPA + MySQL</a>
\- <a href="https://bezkoder.com/spring-boot-mongodb-crud/">Spring Data + MongoDB</a>

<h2>Spring Boot Rest Apis Back-end</h2>
<h3>Overview</h3>
These are APIs that Spring Boot App will export:
<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>
- We make CRUD operations & finder methods with Spring Data JPA's <code>JpaRepository</code>.
- The database will be H2 Database (in memory or on disk) by configuring project dependency & datasource.

<h3>Technology</h3>
<ul>
    	<li>Java 8</li>
    	<li>Spring Boot 2.4 (with Spring Web MVC, Spring Data JPA)</li>
    	<li>H2 Database</li>
    	<li>Maven 3.6.1</li>
</ul>

<h3>Project Structure</h3>

![spring-boot-react-redux-example-crud-server-project-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0huboi7we5v3207gbll5.png)

– <code>Tutorial</code> data model class corresponds to entity and table <em>tutorials</em>.
– <code>TutorialRepository</code> is an interface that extends <a href="https://docs.spring.io/spring-data/jpa/docs/current/api/org/springframework/data/jpa/repository/JpaRepository.html">JpaRepository</a> for CRUD methods and custom finder methods. It will be autowired in <code>TutorialController</code>.
– <code>TutorialController</code> is a <a href="https://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/web/bind/annotation/RestController.html">RestController</a> which has request mapping methods for RESTful requests such as: <em>getAllTutorials</em>, <em>createTutorial</em>, <em>updateTutorial</em>, <em>deleteTutorial</em>, <em>findByPublished</em>...
– Configuration for Spring Datasource, JPA & Hibernate in <strong>application.properties</strong>.
– <strong>pom.xml</strong> contains dependencies for Spring Boot and H2 Database.

<h2>React Redux Front-end</h2>
<h3>Overview</h3>
This is React components that we're gonna implement:

![spring-boot-react-redux-example-crud-client-components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fip8rrzxcni7n30vrtk.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.

This diagram shows how Redux elements work in our React Application:

![spring-boot-react-redux-example-crud-store-architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hlfk958dgeryz4dwvw9.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>.

<h3>Technology</h3>
<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>

<h3>Project Structure</h3>
![spring-boot-react-redux-example-crud-client-project-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k0pmxledyj2pe0iru91w.png)

- <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.

For more steps and Source code, please visit:
[https://bezkoder.com/spring-boot-react-redux-example/](https://bezkoder.com/spring-boot-react-redux-example/)

## Further Reading
Related Posts:
- <a href="https://bezkoder.com/react-spring-boot-pagination/">React + Spring Boot: Pagination example</a>
- <a href="https://bezkoder.com/spring-boot-react-jwt-auth/">Spring Boot + React: Login example with JWT Authentication & Spring Security</a>
- <a href="https://bezkoder.com/react-file-upload-spring-boot/">React Upload/Download Files to/from Spring Boot Rest Apis</a>

Run both projects in one place:
<a href="https://bezkoder.com/integrate-reactjs-spring-boot/">How to integrate React.js with Spring Boot</a>

- Front-end without Redux:
<ul>
	<li><a href="https://bezkoder.com/react-crud-web-api/">Using React Components</a></li>
	<li><a href="https://bezkoder.com/react-hooks-crud-axios-api/">Using React Hooks</a></li>
	<li><a href="https://bezkoder.com/react-material-ui-examples-crud/">Using React with Material UI</a></li>
</ul>

- Spring Restful Apis for other databases:
<ul>
	<li><a href="https://bezkoder.com/spring-boot-postgresql-example/">Spring JPA + PostgreSQL</a></li>
	<li><a href="https://bezkoder.com/spring-boot-jpa-crud-rest-api/">Spring JPA + MySQL</a></li>
	<li><a href="https://bezkoder.com/spring-boot-mongodb-crud/">Spring Data + MongoDB</a></li>
</ul>