How to Integrate React Redux + Nodejs/Express RestAPIs + Sequelize ORM – MySQL CRUD example

react-redux-http-client-nodejs-restapi-express-sequelize-mysql---feature-image

In this tutorial, we will build React Redux Http Client & Nodejs/Express RestAPIs Server example that uses Sequelize ORM to interact with MySQL database and React as a front-end technology to make request and receive response.

Related posts:
Sequelize ORM – Build CRUD RestAPIs with NodeJs/Express, Sequelize, MySQL
How to connect React with Redux – react-redux example

Technologies

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

– Node.js/Express
– Sequelize

– MySQL 5.7.16

Overview

react-redux-http-client-nodejs-restapi-express-sequelize-mysql---overview-1

1. Nodejs/Express Server

react-redux-http-client-nodejs-restapi-express-sequelize-mysql---backend-architecture

2. React Redux Client

react-redux-http-client-nodejs-restapi-express-sequelize-mysql---react-redux-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

1. Node.js Backend

– Project structure:

react-redux-http-client-nodejs-restapi-express-sequelize-mysql---nodejs-project-structure

Setting up Nodejs/Express project

Init package.json by cmd:

npm init

Install express, mysql, sequelize & cors:

$npm install express cors sequelize mysql2 --save

-> now package.json file:

Setting up Sequelize MySQL connection

– Create ./app/config/env.js file:

– Setup Sequelize-MySQL connection in ./app/config/db.config.js file:

Create Sequelize model

./app/model/book.model.js file:

Express RestAPIs
Route

-> Define Book’s routes in ./app/route/book.route.js file:

Controller

-> Implement Book’s controller in ./app/controller/book.controller.js file:

Server.js

server.js file:

2. React Redux Client

react-redux-http-client-nodejs-restapi-express-sequelize-mysql---react-client-project-structure

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 Results

– Run Nodejs project with commandlines: npm start
– Run the React App with command: yarn run dev-server

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

react-redux-http-client-nodejs-restapi-express-sequelize-mysql---add-book

Show Books:

react-redux-http-client-nodejs-restapi-express-sequelize-mysql---show-book

Check MySQL database:

react-redux-http-client-nodejs-restapi-express-sequelize-mysql---mysql-book-adding-records

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

react-redux-http-client-nodejs-restapi-express-sequelize-mysql---edit-book

Click Add Book button and check new Book list:

react-redux-http-client-nodejs-restapi-express-sequelize-mysql---edit-book-return

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

react-redux-http-client-nodejs-restapi-express-sequelize-mysql---result-remove-book

Check MySQL Database:

react-redux-http-client-nodejs-restapi-express-sequelize-mysql---result-show-books-database-after-edit

-> Sequelize’s Logs:

Source Code

Nodejs-React-RestAPIs
ReactReduxHttpClient

By grokonez | December 31, 2018.



Related Posts


Got Something To Say:

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

*