How to Integrate React Redux + Nodejs/Express RestAPIs + Sequelize ORM – PostgreSQL CRUD example
Tags: node, express, redux, postgres
Published: 2021-05-21 09:52:22

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:
– <a href="https://grokonez.com/node-js/sequelize/node-js-express-restapis-get-post-put-delete-sequelize-crud-postgresql">Node.js/Express RestAPIs CRUD – Sequelize ORM – PostgreSQL</a>
- <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>

<!--more-->
<h2>Technologies</h2>
– 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
<h2>Overview</h2>
<img src="https://grokonez.com/wp-content/uploads/2019/01/react-redux-http-client-nodejs-restapi-express-sequelize-postgresql-overview-1.png" alt="react-redux-http-client-nodejs-restapi-express-sequelize-postgresql---overview-1" width="395" height="611" class="alignnone size-full wp-image-16387" />
<h3>1. Nodejs/Express Server</h3>
<img src="https://grokonez.com/wp-content/uploads/2019/01/react-redux-http-client-nodejs-restapi-express-sequelize-postgresql-backend-architecture.png" alt="react-redux-http-client-nodejs-restapi-express-sequelize-postgresql---backend-architecture" width="701" height="325" class="alignnone size-full wp-image-16388" />
<h3>2. React Redux Client</h3>
<img src="https://grokonez.com/wp-content/uploads/2019/01/react-redux-http-client-nodejs-restapi-express-sequelize-postgresql-react-redux-client.png" alt="react-redux-http-client-nodejs-restapi-express-sequelize-postgresql---react-redux-client" width="695" height="408" class="alignnone size-full wp-image-16389" />

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>1. Node.js Backend</h3>
- Project structure:

<img src="https://grokonez.com/wp-content/uploads/2019/01/react-redux-http-client-nodejs-restapi-express-sequelize-postgresql-nodejs-project-structure.png" alt="react-redux-http-client-nodejs-restapi-express-sequelize-postgresql---nodejs-project-structure" width="209" height="340" class="alignnone size-full wp-image-16390" />
<h4>Setting up Nodejs/Express project</h4>
Init <code>package.json</code> by cmd:

<code>npm init</code>

Install <code>express</code>, <code>postgresql</code>, <code>sequelize</code> & <code>cors</code>:

<code>$npm install express cors sequelize pg pg-hstore --save</code>

-> now <code>package.json</code> file:

<pre><code class="language-json">
{
  "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"
  }
}
</code></pre>
<h4>Setting up Sequelize PostgreSQL connection</h4>
– Create <code>./app/config/env.js</code> 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