DEV Community

loading...

How to Integrate React Redux + Nodejs/Express RestAPIs + Mongoose ODM – MongoDB CRUD example

loizenai profile image loizenai ・2 min read

https://grokonez.com/frontend/react/how-to-integrate-react-redux-nodejs-express-restapis-mongoose-odm-mongodb-crud-example

How to Integrate React Redux + Nodejs/Express RestAPIs + Mongoose ODM - MongoDB CRUD example

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

Related posts:
Crud RestAPIs with NodeJS/Express, MongoDB using Mongoose

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
– Mongoose ODM

– MongoDB

Overview

react-redux-http-client-nodejs-restapi-express-mongoose-mongodb---overview-1

1. Nodejs/Express Server

react-redux-http-client-nodejs-restapi-express-mongoose-mongodb---backend-architecture

2. React Redux Client

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

https://grokonez.com/frontend/react/how-to-integrate-react-redux-nodejs-express-restapis-mongoose-odm-mongodb-crud-example

Discussion (0)

pic
Editor guide