Spring Boot + React Redux + PostgreSQL CRUD example
Tags: springboot, react, redux, postgres
Published: 2021-03-12 15:57:16

https://grokonez.com/spring-framework/spring-data-rest/spring-boot-react-redux-postgresql-crud-example

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

Related Post: <a href="https://grokonez.com/spring-framework/spring-boot/use-spring-jpa-postgresql-spring-boot">How to use Spring JPA with PostgreSQL | Spring Boot</a>

<!--more-->
<h2>Technologies</h2>
- 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

- PostgreSQL 9.5.3

<h2>Overview</h2>
<img src="https://grokonez.com/wp-content/uploads/2018/05/react-redux-spring-boot-postgresql-crud-example-result-show-books.png" alt="react-redux-spring-boot-postgresql-crud-example-result-show-books" width="395" height="611" class="alignnone size-full wp-image-12130" />

<h3>1. Spring Boot Server</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/05/react-redux-spring-boot-postgresql-crud-example-spring-server.png" alt="react-redux-spring-boot-postgresql-crud-example-spring-server" width="700" height="318" class="alignnone size-full wp-image-12131" />

Spring Data JPA with PostgreSQL example:
<a href="https://grokonez.com/spring-framework/spring-boot/use-spring-jpa-postgresql-spring-boot">How to use Spring JPA with PostgreSQL | Spring Boot</a>

<h3>2. React Redux Client</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/05/react-redux-spring-boot-postgresql-crud-example-react-client.png" alt="react-redux-spring-boot-postgresql-crud-example-react-client" width="695" height="408" class="alignnone size-full wp-image-12133" />

For more details about:
- Redux: <a href="https://grokonez.com/frontend/introduction-to-redux-a-simple-practical-redux-example">A simple practical Redux example</a>
- Middleware: <a href="https://grokonez.com/frontend/react/react-redux-firebase-crud-operations-example#Redux_Thunk">Middleware with Redux Thunk</a>
- Connecting React with Redux: <a href="https://grokonez.com/frontend/how-to-connect-react-with-redux-react-redux-example">How to connect React with Redux – react-redux example</a>
<h2>Practice</h2>
<h3>Project Structure</h3>
<h4>1. Spring Boot Server</h4>
<img src="https://grokonez.com/wp-content/uploads/2018/05/react-redux-spring-boot-postgresql-crud-example-react-spring-server-structure.png" alt="react-redux-spring-boot-postgresql-crud-example-react-spring-server-structure" width="316" height="363" class="alignnone size-full wp-image-12132" />

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



https://grokonez.com/spring-framework/spring-data-rest/spring-boot-react-redux-postgresql-crud-example