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

react-redux-http-client-nodejs-restapi-express-mongoose-mongodb---feature-image

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

Setting up Nodejs/Express project

Init package.json by cmd:

npm init

Install express, mongoose & cors:

$npm install express cors mongoose --save

-> now package.json file:

Setting up Mongoose connection

./app/config/mongodb.config.js file:

Create Mongoose 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-mongoose-mongodb---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 MongoDB: mongod.exe
– 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-mongoose-mongodb---add-book

Show Books:

react-redux-http-client-nodejs-restapi-express-mongoose-mongodb---show-book

Check MongoDB database:

react-redux-http-client-nodejs-restapi-express-mongoose-mongodb---mongodb-book-adding-records

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

react-redux-http-client-nodejs-restapi-express-mongoose-mongodb---edit-book

Click Add Book button and check new Book list:

react-redux-http-client-nodejs-restapi-express-mongoose-mongodb---edit-book-return

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

react-redux-http-client-nodejs-restapi-express-mongoose-mongodb---result-remove-book

Check MongoDB Database:

react-redux-http-client-nodejs-restapi-express-mongoose-mongodb---mongodb-book-after-edit

Source Code

ReactReduxHttpClient
Nodejs-RestAPIs-MongoDB

By grokonez | January 6, 2019.



Related Posts


Got Something To Say:

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

*