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


3 thoughts on “How to Integrate React Redux + Nodejs/Express RestAPIs + Sequelize ORM – MySQL CRUD example”

  1. so I’m trying your example, very good by the way, but for some reason I’m getting an error when compiling and running the react-redux client. I’m getting a fail on the in app.js. I cloned your project did an npm init and an npm install, compared the code to this site and haven’t noticed any differences. Any ideas?

    1. so I’ve solved the first issue by adding a .babelrc file with “react” and “es2015” as presets. Now I’m getting errors in the books.js reducer file as the compiler doesn’t like the spread indicator (…) attached to state, book and action objects.

      1. Success!
        – Added the .babelrc file containing: {“presets” : [“react”, “es2015”]}
        – Removed all spread operators (…) in the books.js reducer file.
        – Removed .book from the end of action in the EDIT_BOOK reducer

Got Something To Say:

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

*