Spring Boot + React Redux + MySQL CRUD example

In this tutorial, we will build React Redux Http Client & Spring Boot Server example that uses Spring Data JPA to interact with MySQL database and React as a front-end technology to make request and receive response.

Related Posts:
How to use Spring JPA with MySQL | Spring Boot
Spring Boot + React Redux + MongoDb CRUD example
Spring Boot + React Redux + Cassandra CRUD example
Spring Boot + React Redux + PostgreSQL CRUD example

Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite 3.9.0.RELEASE
– Spring Boot 2.0.1.RELEASE

– Webpack 4.4.1
– React 16.3.0
– Redux 3.7.2
– React Redux 5.0.7
– axios 0.18.0

– MySQL 5.7.16

Overview

react-redux-spring-boot-mysql-crud-example-result-show-books

1. Spring Boot Server

react-redux-spring-boot-mysql-crud-example-spring-server

Spring Data JPA with MySQL example:
How to use Spring JPA with MySQL | Spring Boot

2. React Redux Client

react-redux-spring-boot-mysql-crud-example-react-client

For more details about:
– Redux: A simple practical Redux example
– Middleware: Middleware with Redux Thunk
– Connecting React with Redux: How to connect React with Redux – react-redux example

Practice

Project Structure

1. Spring Boot Server

react-redux-spring-boot-mysql-crud-example-spring-server-structure

– Class Book corresponds to document in books collection.
BookRepository is an interface extends CrudRepository, will be autowired in BookController for implementing repository methods and finder methods.
BookController is a REST Controller which has request mapping methods for RESTful requests such as: getAll, create, update, delete Books.
– Configuration for Spring Data JPA properties in application.properties.
– Dependencies for Spring Boot and Spring Data JPA in pom.xml.

2. React Redux Client

react-redux-spring-boot-mysql-crud-example-react-redux-client-structure

AppRouter is for routing.
actions, reducers and store contains Redux elements.
components folder includes React Components with react-redux connect() function.
axios configures base URL for HTTP client. We use axios methods as async side-effects inside actions/books.js.

How to do

1. Spring Boot Server
1.1 Dependency

pom.xml

1.2 Book – Data Model

model/Book.java

1.3 Repository

repo/BookRepository.java

1.4 REST Controller

controller/BookController.java

1.5 Configuration for Spring Datasource & JPA properties

application.properties

2. React Redux Client
2.1 Dependency

package.json

.babelrc

Run cmd: yarn install.

2.2 Configure base URL

axios/axios.js

2.3 Redux Action

actions/books.js

2.4 Redux Reducer

reducers/books.js

2.5 Redux Store

store/store.js

2.6 React Components

components/Book.js

components/DashBoard.js

components/BookList.js

components/AddBook.js

components/EditBook.js

components/BookForm.js

2.7 React Router

routers/AppRouter.js

components/Header.js

2.8 Render App

app.js

Run & Check Result

Build and Run Spring Boot project with commandlines: mvn clean install and mvn spring-boot:run.
– Run the React App with command: yarn run dev-server.

– Open browser for url http://localhost:8081/:
Add Book:

react-redux-spring-boot-mysql-crud-example-result-add-book

Show Books:

react-redux-spring-boot-mysql-crud-example-result-show-books

Check MySQL database:

react-redux-spring-boot-mysql-crud-example-result-show-books-database

Click on a Book’s title, app goes to Edit Page:

react-redux-spring-boot-mysql-crud-example-result-edit-book

Click Add Book button and check new Book list:

react-redux-spring-boot-mysql-crud-example-result-edit-book-return

Click on certain Remove button to remove certain Book.
For example, removing Origin:

react-redux-spring-boot-mysql-crud-example-result-remove-book

Check MySQL Database:

react-redux-spring-boot-mysql-crud-example-result-show-books-database-after-edit

Source Code

SpringBootMySQL-server
ReactReduxHttpClient

By grokonez | May 3, 2018.

Last updated on August 23, 2018.



Related Posts


6 thoughts on “Spring Boot + React Redux + MySQL CRUD example”

  1. This is a great article! Can you please give an example of how one would use react redux in a scenario where there are relationships? IE: with two models : Books and Authors (both with Id’s as the primary Key). How would one implement this ManyToMany relationship in the crud ui? How would we set up the Spring Data Rest post from the react form?

    Any help is greatly appreciated! Thank you.

    Manpreet

  2. when executing the command it gives me an error in the index.js:

    ERROR in ./src/index.js
    Module analysis failed: Unexpected token (7:16)
    You may need a suitable charger to handle this type of file.
    | import registerServiceWorker from ‘./registerServiceWorker’;
    |
    | ReactDOM.render (, document.getElementById (‘root’));
    | registerServiceWorker ();
    |
    @ multi (webpack) -dev-server / client? http: // localhost: 8081 ./src
    i 「wdm」: could not compile.

    1. hi Nikola,

      This is the content pf webpack.config.js:

      You can also find it in the Source Code session of the post.

      Regards,
      grokonez.

Got Something To Say:

Your email address will not be published. Required fields are marked *

*