DEV Community

loizenai
loizenai

Posted on

2

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

https://grokonez.com/frontend/redux/how-to-integrate-react-redux-nodejs-express-restapis-sequelize-orm-postgresql-crud-example

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

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

Related posts:
Node.js/Express RestAPIs CRUD – Sequelize ORM – PostgreSQL

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

– PostgreSQL

Overview

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

1. Nodejs/Express Server

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

2. React Redux Client

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

Setting up Nodejs/Express project

Init package.json by cmd:

npm init

Install express, postgresql, sequelize & cors:

$npm install express cors sequelize pg pg-hstore --save

-> now package.json file:


{
  "name": "nodejs-react-restapi",
  "version": "1.0.0",
  "description": "Nodejs React RestAPIs",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "Nodejs",
    "React",
    "RestAPI",
    "Redux",
    "PostgreSQL"
  ],
  "author": "grokonez.com",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.16.4",
    "pg": "^7.7.1",
    "pg-hstore": "^2.3.2",
    "sequelize": "^4.42.0"
  }
}

Setting up Sequelize PostgreSQL connection

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

More at:

https://grokonez.com/frontend/redux/how-to-integrate-react-redux-nodejs-express-restapis-sequelize-orm-postgresql-crud-example

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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay