In this tutorial, we will learn how to build a full stack Spring Boot + React Redux 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.
Related Posts:
– Spring Boot + React Typescript example
– React + Spring Boot: Pagination example
– Spring Boot + React: Login example with JWT Authentication & Spring Security
– React Upload/Download Files to/from Spring Boot Rest Apis
Run both projects in one place:
How to integrate React.js with Spring Boot
Other Databases:
- Spring JPA + PostgreSQL
- Spring JPA + MySQL
- Spring Data + MongoDB
- Spring JPA + SQL Server
- Spring JPA + Oracle
- Spring Data + Cassandra
Contents
- Spring Boot React Redux example Overview
- Architecture of Spring Boot React Redux example
- Spring Boot Rest Apis Back-end
- React Redux Front-end
- Overview
- Technology
- Project Structure
- Setup React Redux Project
- Import Bootstrap to React Redux App
- Add React Router to React Redux App
- Add Navbar to React Redux App
- Initialize Axios for React Redux with API calls
- Create Data Service
- Create Redux Actions
- Create Redux Reducer
- Create Redux Store
- Provide State to React Components
- Create React Components/Pages
- Run React Redux Client
- Source Code
- Conclusion
Spring Boot React Redux example Overview
We will build a full-stack Spring Boot & React Redux Tutorial Application in that:
- Each Tutorial has id, title, description, published status.
- We can create, retrieve, update, delete Tutorials.
- We can also find Tutorials by title.
The images below shows screenshots of our System.
– Create a Tutorial:
– Retrieve all Tutorials:
– Click on Edit button to retrieve an item:
On this Page, you can:
- change status to Published using Publish button
- remove the Tutorial from Database using Delete button
- update the Tutorial details on Database with Update button
– Search items by title:
Architecture of Spring Boot React Redux example
This is the application architecture we’re gonna build:
– Spring Boot exports REST Apis using Spring Web MVC & interactsrations & finder methods with Spring D
– React Client sends HTTP Requests and retrieves HTTP Responses using Axios, consume data on Redux which provides state to the Components. React Router is used for navigating to pages.
– Spring JPA + PostgreSQL
– Spring JPA + MySQL
– Spring Data + MongoDB
– Spring JPA + SQL Server
– Spring JPA + Oracle
– Spring Data + Cassandra
Spring Boot Rest Apis Back-end
Overview
These are APIs that Spring Boot App will export:
Methods | Urls | Actions |
---|---|---|
POST | /api/tutorials | create new Tutorial |
GET | /api/tutorials | retrieve all Tutorials |
GET | /api/tutorials/:id | retrieve a Tutorial by :id |
PUT | /api/tutorials/:id | update a Tutorial by :id |
DELETE | /api/tutorials/:id | delete a Tutorial by :id |
DELETE | /api/tutorials | delete all Tutorials |
GET | /api/tutorials?title=[keyword] | find all Tutorials which title contains keyword |
– We make CRUD operations & finder methods with Spring Data JPA’s JpaRepository
.
– The database will be H2 Database (in memory or on disk) by configuring project dependency & datasource.
Technology
- Java 8
- Spring Boot 2 (with Spring Web MVC, Spring Data JPA)
- H2 Database
- Maven 3.6.1
Project Structure
– Tutorial
data model class corresponds to entity and table tutorials.
– TutorialRepository
is an interface that extends JpaRepository for CRUD methods and custom finder methods. It will be autowired in TutorialController
.
– TutorialController
is a RestController which has request mapping methods for RESTful requests such as: getAllTutorials, createTutorial, updateTutorial, deleteTutorial, findByPublished…
– Configuration for Spring Datasource, JPA & Hibernate in application.properties.
– pom.xml contains dependencies for Spring Boot and H2 Database.
Create & Setup Spring Boot project
Use Spring web tool or your development tool (Spring Tool Suite, Eclipse, Intellij) to create a Spring Boot project.
Then open pom.xml and add these dependencies:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
Configure Spring Boot, JPA, h2, Hibernate
Under src/main/resources folder, open application.properties and write these lines.
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.H2Dialect
spring.jpa.hibernate.ddl-auto= update
spring.h2.console.enabled=true
# default path: h2-console
spring.h2.console.path=/h2-ui
spring.datasource.url
:jdbc:h2:mem
for In-memory database andjdbc:h2:file
for disk-based database.spring.datasource.username
&spring.datasource.password
properties are the same as your database installation.- Spring Boot uses Hibernate for JPA implementation, we configure
H2Dialect
for H2 Database spring.jpa.hibernate.ddl-auto
is used for database initialization. We set the value toupdate
value so that a table will be created in the database automatically corresponding to defined data model. Any change to the model will also trigger an update to the table. For production, this property should bevalidate
.spring.h2.console.enabled=true
tells the Spring to start H2 Database administration tool and you can access this tool on the browser:http://localhost:8080/h2-console
.spring.h2.console.path=/h2-ui
is for H2 console’s url, so the default urlhttp://localhost:8080/h2-console
will change tohttp://localhost:8080/h2-ui
.
Define Data Model
Our Data model is Tutorial with four fields: id, title, description, published.
In model package, we define Tutorial
class.
model/Tutorial.java
package com.bezkoder.spring.jpa.h2.model;
import javax.persistence.*;
@Entity
@Table(name = "tutorials")
public class Tutorial {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private long id;
@Column(name = "title")
private String title;
@Column(name = "description")
private String description;
@Column(name = "published")
private boolean published;
...
}
– @Entity
annotation indicates that the class is a persistent Java class.
– @Table
annotation provides the table that maps this entity.
– @Id
annotation is for the primary key.
– @GeneratedValue
annotation is used to define generation strategy for the primary key. GenerationType.AUTO
means Auto Increment field.
– @Column
annotation is used to define the column in database that maps annotated field.
Create Repository Interface
Let’s create a repository to interact with Tutorials from the database.
In repository package, create TutorialRepository
interface that extends JpaRepository
.
repository/TutorialRepository.java
package com.bezkoder.spring.jpa.h2.repository;
import java.util.List;
import org.springframework.data.jpa.repository.JpaRepository;
import com.bezkoder.spring.jpa.h2.model.Tutorial;
public interface TutorialRepository extends JpaRepository<Tutorial, Long> {
List<Tutorial> findByPublished(boolean published);
List<Tutorial> findByTitleContaining(String title);
}
Now we can use JpaRepository’s methods: save()
, findOne()
, findById()
, findAll()
, count()
, delete()
, deleteById()
… without implementing these methods.
We also define custom finder methods:
– findByPublished()
: returns all Tutorials with published
having value as input published
.
– findByTitleContaining()
: returns all Tutorials which title contains input title
.
The implementation is plugged in by Spring Data JPA automatically.
You can modify this Repository:
– to work with Pagination, the instruction can be found at:
Spring Boot Pagination & Filter example | Spring JPA, Pageable
– or to sort/order by multiple fields with the tutorial:
Spring Data JPA Sort/Order by multiple Columns | Spring Boot
You also find way to write Unit Test for this JPA Repository at:
Spring Boot Unit Test for JPA Repositiory with @DataJpaTest
Create Spring Rest APIs Controller
Finally, we create a controller that provides APIs for creating, retrieving, updating, deleting and finding Tutorials.
controller/TutorialController.java
package com.bezkoder.spring.jpa.h2.controller;
...
@CrossOrigin(origins = "http://localhost:8081")
@RestController
@RequestMapping("/api")
public class TutorialController {
@Autowired
TutorialRepository tutorialRepository;
@GetMapping("/tutorials")
public ResponseEntity<List<Tutorial>> getAllTutorials(@RequestParam(required = false) String title) {
...
}
@GetMapping("/tutorials/{id}")
public ResponseEntity<Tutorial> getTutorialById(@PathVariable("id") long id) {
...
}
@PostMapping("/tutorials")
public ResponseEntity<Tutorial> createTutorial(@RequestBody Tutorial tutorial) {
...
}
@PutMapping("/tutorials/{id}")
public ResponseEntity<Tutorial> updateTutorial(@PathVariable("id") long id, @RequestBody Tutorial tutorial) {
...
}
@DeleteMapping("/tutorials/{id}")
public ResponseEntity<HttpStatus> deleteTutorial(@PathVariable("id") long id) {
...
}
@DeleteMapping("/tutorials")
public ResponseEntity<HttpStatus> deleteAllTutorials() {
...
}
@GetMapping("/tutorials/published")
public ResponseEntity<List<Tutorial>> findByPublished() {
...
}
}
– @CrossOrigin
is for configuring allowed origins.
– @RestController
annotation is used to define a controller and to indicate that the return value of the methods should be be bound to the web response body.
– @RequestMapping("/api")
declares that all Apis’ url in the controller will start with /api
.
– We use @Autowired
to inject TutorialRepository
bean to local variable.
You can continue with step by step to implement this Spring Boot Server in the post:
Spring Boot JPA + H2 example: Build a CRUD Rest APIs
Or using Reactive Rest API:
Spring Boot R2DBC + H2 example: Build a CRUD Rest APIs
Run the Spring Boot Server
Run Spring Boot application with command: mvn spring-boot:run
.
React Redux Front-end
Overview
This is React components that we’re gonna implement:
– The App
component is a container with React Router
. It has navbar
that links to routes paths.
– Three components that dispatch actions to Redux Thunk Middleware
which uses TutorialDataService
to call Rest API.
TutorialsList
component gets and displays Tutorials.Tutorial
component has form for editing Tutorial’s details based on:id
.AddTutorial
component has form for submission new Tutorial.
– TutorialDataService
uses axios
to make HTTP requests and receive responses.
This diagram shows how Redux elements work in our React Application:
We’re gonna create Redux store
for storing tutorials
data. Other React Components will work with the Store via dispatching an action
.
The reducer
will take the action and return new state
.
Technology
- React 17/16
- react-redux 7.2.3
- redux 4.0.5
- redux-thunk 2.3.0
- react-router-dom 5.2.0
- axios 0.21.1
- bootstrap 4
Project Structure
– package.json contains main modules: react
, react-router-dom
, react-redux
, redux
, redux-thunk
, axios
& bootstrap
.
– App
is the container that has Router
& navbar.
– There are 3 components: TutorialsList
, Tutorial
, AddTutorial
.
– http-common.js initializes axios with HTTP base Url and headers.
– TutorialDataService
has methods for sending HTTP requests to the Apis.
– .env configures port for this React CRUD App.
About Redux elements that we’re gonna use:
– actions folder contains the action creator (tutorials.js for CRUD operations and searching).
– reducers folder contains the reducer (tutorials.js) which updates the application state corresponding to dispatched action.
If you want to work with React Hooks instead, please visit:
React Hooks + Redux: CRUD example with Axios and Rest API
Setup React Redux Project
Open cmd at the folder you want to save Project folder, run command:
npx create-react-app react-redux-crud-example
After the process is done. We create additional folders and files like the following tree:
public
src
actions
types.js
tutorials.js (create/retrieve/update/delete actions)
reducers
index.js
tutorials.js
components
add-tutorial.component.js
tutorial.component.js
tutorials-list.component.js
services
tutorial.service.js
App.css
App.js
index.js
store.js
package.json
Import Bootstrap to React Redux App
Run command: npm install bootstrap
.
Open src/App.js and modify the code inside it as following-
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
class App extends Component {
render() {
// ...
}
}
export default App;
Add React Router to React Redux App
– Run the command: npm install react-router-dom
.
– Open src/App.js and wrap all UI elements by BrowserRouter
object.
...
import { BrowserRouter as Router } from "react-router-dom";
class App extends Component {
render() {
return (
<Router>
...
</Router>
);
}
}
export default App;
The App
component is the root container for our application, it will contain a navbar
inside <Router>
above, and also, a Switch
object with several Route
. Each Route
points to a React Component.
Now App.js looks like:
import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import AddTutorial from "./components/add-tutorial.component";
import Tutorial from "./components/tutorial.component";
import TutorialsList from "./components/tutorials-list.component";
class App extends Component {
render() {
return (
<Router>
<nav className="navbar navbar-expand navbar-dark bg-dark">
<Link to={"/tutorials"} className="navbar-brand">
bezKoder
</Link>
<div className="navbar-nav mr-auto">
<li className="nav-item">
<Link to={"/tutorials"} className="nav-link">
Tutorials
</Link>
</li>
<li className="nav-item">
<Link to={"/add"} className="nav-link">
Add
</Link>
</li>
</div>
</nav>
<div className="container mt-3">
<Switch>
<Route exact path={["/", "/tutorials"]} component={TutorialsList} />
<Route exact path="/add" component={AddTutorial} />
<Route path="/tutorials/:id" component={Tutorial} />
</Switch>
</div>
</Router>
);
}
}
export default App;
Initialize Axios for React Redux with API calls
Let’s install axios with command: npm install axios
.
Under src folder, we create http-common.js file with following code:
import axios from "axios";
export default axios.create({
baseURL: "http://localhost:8080/api",
headers: {
"Content-type": "application/json"
}
});
You can change the baseURL
that depends on REST APIs url that your Server configures.
Create Data Service
In this step, we’re gonna create a service that uses axios object above to send HTTP requests or make API calls.
services/tutorial.service.js
import http from "../http-common";
class TutorialDataService {
getAll() {
return http.get("/tutorials");
}
get(id) {
return http.get(`/tutorials/${id}`);
}
create(data) {
return http.post("/tutorials", data);
}
update(id, data) {
return http.put(`/tutorials/${id}`, data);
}
delete(id) {
return http.delete(`/tutorials/${id}`);
}
deleteAll() {
return http.delete(`/tutorials`);
}
findByTitle(title) {
return http.get(`/tutorials?title=${title}`);
}
}
export default new TutorialDataService();
We call axios get
, post
, put
, delete
method corresponding to HTTP Requests: GET, POST, PUT, DELETE to make CRUD Operations.
Create Redux Actions
We’re gonna create actions in src/actions folder:
actions
types.js
tutorials.js (create/retrieve/update/delete actions)
First we defined some string constant that indicates the type of action being performed.
actions/type.js
export const CREATE_TUTORIAL = "CREATE_TUTORIAL";
export const RETRIEVE_TUTORIALS = "RETRIEVE_TUTORIALS";
export const UPDATE_TUTORIAL = "UPDATE_TUTORIAL";
export const DELETE_TUTORIAL = "DELETE_TUTORIAL";
export const DELETE_ALL_TUTORIALS = "DELETE_ALL_TUTORIALS";
Next we make creators for actions related to tutorials. We’re gonna import TutorialDataService
to make asynchronous HTTP requests with trigger dispatch
on the result.
– createTutorial()
- calls the
TutorialDataService.create()
- dispatch
CREATE_TUTORIAL
– retrieveTutorials()
- calls the
TutorialDataService.getAll()
- dispatch
RETRIEVE_TUTORIALS
– updateTutorial()
- calls the
TutorialDataService.update()
- dispatch
UPDATE_TUTORIAL
– deleteTutorial()
- calls the
TutorialDataService.delete()
- dispatch
DELETE_TUTORIAL
– deleteAllTutorials()
- calls the
TutorialDataService.deleteAll()
- dispatch
DELETE_ALL_TUTORIALS
– findTutorialsByTitle()
- calls the
TutorialDataService.findByTitle()
- dispatch
RETRIEVE_TUTORIALS
Some action creators return a Promise
for Components using them.
For more details, please visit:
React Redux CRUD example with Rest API
Create Redux Reducer
There will be a reducer in src/reducers folder, the reducer updates the state corresponding to dispatched Redux actions.
reducers
index.js
tutorials.js
The tutorials
reducer will update tutorials
state of the Redux store:
reducers/tutorials.js
import {
CREATE_TUTORIAL,
RETRIEVE_TUTORIALS,
UPDATE_TUTORIAL,
DELETE_TUTORIAL,
DELETE_ALL_TUTORIALS,
} from "../actions/types";
const initialState = [];
function tutorialReducer(tutorials = initialState, action) {
const { type, payload } = action;
switch (type) {
case CREATE_TUTORIAL:
return [...tutorials, payload];
case RETRIEVE_TUTORIALS:
return payload;
case UPDATE_TUTORIAL:
return tutorials.map((tutorial) => {
if (tutorial.id === payload.id) {
return {
...tutorial,
...payload,
};
} else {
return tutorial;
}
});
case DELETE_TUTORIAL:
return tutorials.filter(({ id }) => id !== payload.id);
case DELETE_ALL_TUTORIALS:
return [];
default:
return tutorials;
}
};
export default tutorialReducer;
Because we only have a single store in a Redux application. We use reducer composition instead of many stores to split data handling logic.
reducers/index.js
import { combineReducers } from "redux";
import tutorials from "./tutorials";
export default combineReducers({
tutorials,
});
Create Redux Store
This Store will bring Actions and Reducers together and hold the Application state.
Now we need to install Redux, Thunk Middleware and Redux Devtool Extension.
Run the command:
npm install redux react-redux redux-thunk
npm install --save-dev redux-devtools-extension
In the previous section, we used combineReducers()
to combine 2 reducers into one. Let’s import it, and pass it to createStore()
:
store.js
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
composeWithDevTools(applyMiddleware(...middleware))
);
export default store;
Provide State to React Components
We will use mapStateToProps
and mapDispatchToProps
to connect Redux state to React Components’ props later using connect()
function:
export default connect(mapStateToProps, mapDispatchToProps)(ReactComponent);
So we need to make the Redux store
available to the connect()
call in the Components. We will wrap a parent or ancestor Component in Provider
.
Provider
is an high order component that wraps up React application and makes it aware of the entire Redux store
. That is, it provides the store
to its child components.
Now we want our entire React App to access the store
, just put the App
Component within Provider
.
Open src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
...
import { Provider } from 'react-redux';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
Create React Components/Pages
Now we’re gonna build 3 components corresponding to 3 Routes defined before.
- Add new Item
- List of items
- Item details
You can continue with step by step to implement this React App in the post:
– React Redux CRUD example with Rest API
– React Hooks + Redux: CRUD example with Rest API
Without Redux:
– React.js CRUD example to consume Web API
– or React Hooks CRUD example to consume Web API
Run React Redux Client
You can run our App with command: npm start
.
If the process is successful, open Browser with Url: http://localhost:8081/
and check it.
Source Code
You can find Github source code for this tutorial at: Spring Boot and React Project Github
Conclusion
Today we have an overview of React Redux + Spring Boot example when building a full-stack CRUD Application.
We also take a look at client-server architecture for REST API using Spring Boot and Spring Data JPA with embedded H2 database, as well as React Redux project structure for building a front-end app to make HTTP requests and consume responses.
Next tutorials show you more details about how to implement the system (including source code):
– Back-end / Back-end with Reactive API
– Front-end:
You will want to know how to run both projects in one place:
How to integrate React.js with Spring Boot
With Pagination:
React Pagination with API using Material-UI
Or Serverless with Firebase:
– React Firebase CRUD with Realtime Database
– React Firestore CRUD App example | Firebase Cloud Firestore
– Front-end without Redux:
– Spring Restful Apis for other databases:
- Spring JPA + PostgreSQL / Spring R2DBC + PostgreSQL
- Spring JPA + MySQL / Spring R2DBC + MySQL
- Spring Data + MongoDB
- Spring JPA + SQL Server
- Spring JPA + Oracle
- Spring Data + Cassandra
Happy learning, see you again!
It’s very interesting Spring + React tutorial! Shared it more with my friends. Thank you!