Spring Boot + React Redux + Cassandra CRUD example
Tags: springboot, react, cassandra
Published: 2021-03-29 16:38:56

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

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

<!--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

- Cassandra 3.9.0
<h2>Overview</h2>
<img src="https://grokonez.com/wp-content/uploads/2018/05/react-redux-spring-boot-cassandra-crud-example-result-show-books.png" alt="react-redux-spring-boot-cassandra-crud-example-result-show-books" width="395" height="611" class="alignnone size-full wp-image-12112" />
<h3>1. Spring Boot Server</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/05/react-redux-spring-boot-cassandra-crud-example-spring-server-1.png" alt="react-redux-spring-boot-cassandra-crud-example-spring-server" width="700" height="316" class="alignnone size-full wp-image-13272" />

Spring Data Cassandra example:
<a href="https://grokonez.com/spring-framework/spring-boot/start-spring-data-cassandra-springboot">How to start Spring Data Cassandra with SpringBoot</a>

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

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-cassandra-crud-example-spring-server-structure.png" alt="react-redux-spring-boot-cassandra-crud-example-spring-server-structure" width="316" height="363" class="alignnone size-full wp-image-12115" />

- Class <strong>Book</strong> corresponds to document in <strong>books</strong> collection.
- <strong>BookRepository</strong> is an interface extends <strong>CassandraRepository</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 Cassandra</strong> properties in <strong>application.properties</strong>
- Dependencies for <strong>Spring Boot</strong> and <strong>Spring Data Cassandra</strong> in <strong>pom.xml</strong>
<h4>2. React Redux Client</h4>
<img src="https://grokonez.com/wp-content/uploads/2018/05/react-redux-spring-boot-cassandra-crud-example-react-redux-client-structure.png" alt="react-redux-spring-boot-cassandra-crud-example-react-redux-client-structure" width="359" height="420" class="alignnone size-full wp-image-12117" />

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


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