DEV Community

loizenai
loizenai

Posted on

Spring Boot + React Redux + PostgreSQL CRUD example

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 Spring Data JPA to interact with PostgreSQL database and React as a front-end technology to make request and receive response.

Related Post: How to use Spring JPA with PostgreSQL | Spring Boot

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

  • PostgreSQL 9.5.3

Overview

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

1. Spring Boot Server

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

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

2. React Redux Client

react-redux-spring-boot-postgresql-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-postgresql-crud-example-react-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.

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

Discussion (0)