Spring Boot + React Redux + MongoDb CRUD example

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

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

– MongoDB 3.4.10

Overview

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

1. Spring Boot Server

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

Spring Data MongoDB – MongoRepository example:
How to use SpringData MongoRepository to interact with MongoDB

2. React Redux Client

react-redux-spring-boot-mongodb-crud-example-react-redux-client-architecture

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-mongodb-crud-example-spring-server-structure

– Class Book corresponds to document in books collection.
BookMongoRepository is an interface extends MongoRepository, 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 MongoDB properties in application.properties
– Dependencies for Spring Boot and Spring Data MongoDB in pom.xml

2. React Redux Client

react-redux-spring-boot-mongodb-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 MongoDB Repository

repo/BookMongoRepository.java

1.4 REST Controller

controller/BookController.java

1.5 Configuration for Spring Data MongoDB

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-mongodb-crud-example-result-add-book

Show Books:

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

Check MongoDB database:

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

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

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

Click Add Book button and check new Book list:

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

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

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

Check MongoDb Database:

react-redux-spring-boot-mongodb-crud-example-result-show-update-books-mongodb

Source Code

SpringBootMongoDb-Server
ReactReduxHttpClient

By grokonez | May 1, 2018.



Related Posts


Got Something To Say:

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

*