Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 7, 2021 02:15 am GMT

How MongoDB Makes Frontend Easier and Backend More Efficient

A document database like MongoDB used mostly within the MERN stack, makes for some interesting design choices in fullstack development. Methods like remove() or findByIdAndDelete() are mysterious and almost too simple, but it definitely allows for cleaner, more consistent relay between front and backend.

To-Do Lists - Deleting Tasks

One of the fundamentals of MERN projects are To-Do lists. I read a post once that compared all of React Development basically to making a To-Do list. JavaScript has Arrays and Objects as methods of storing data. Adding to both of these things is quite simple.

Add to an Array

//declare an array using bracketsconst starBursts = ['apple', 'orange', 'banana'];//Add strawberry to the arraystarBursts.push('strawberry');console.log(starBursts);
Enter fullscreen mode Exit fullscreen mode

In the console we would see:

> ['apple', 'orange', 'banana', 'strawberry']
Enter fullscreen mode Exit fullscreen mode

In similar fashion for a redux reducer we would find it easy to append an array

const toDoReducer = (state = [], action) => {    switch(action.type) {        default:            return state;        case "ADD-TO-DO":            return [...state, action.payload];}export default toDoReducer;
Enter fullscreen mode Exit fullscreen mode

Deleting To-Dos

Adding to JavaScript arrays is quite simple, yet deleting items may become an arduous task.

Suppose I want to delete a specific To-Do Object from a todoList array. JavaScript has a few options for this with .pop(), .splice(), and .shift() methods. The most popular way, in our case, would use .IndexOf() and .splice()

Example

const array = [2, 5, 9];console.log(array);const index = array.indexOf(5);if (index > -1) {  array.splice(index, 1);}// array = [2, 9]console.log(array); 
Enter fullscreen mode Exit fullscreen mode

The above notation is a common way to remove information from an Array. However involving redux, we quickly begin to see how this is a problem when we call the entire state using [...state].

MongoDB

Mongo Db solves this issue using the remove() function. Mongoose is full of appropriately named functions like these, that turn our JavaScript acrobatics into simple Async functions. Using Id's MongoDB is able to simplify our complex Data needs without nesting data into tables.

Assume we pass an object with a specified ID to the backend and wish to delete it.

Example

//express router for deletionrouter.delete('/deleteTodo', async(req,res) => {//grab the correct todo from database     const deletedToDo = await Product.findById(req.params.id);  if (deletedToDo) {//use async await to avoid issues in event loop//remove using .remove() function    await deletedToDo.remove();    res.send({ message: 'Todo was Deleted' });  } else {    res.send('Error in Deletion.');  }})
Enter fullscreen mode Exit fullscreen mode

Now with Mongoose CRUD methods, our Frontend Engineer would have a simpler time creating a redux store, and relaying data to the backend. We could even go further and utilize findByIdAndDelete() to delete a specific model without disturbing the current route.

For Example:

router.delete('/deleteTodo', async(req,res) => {const deleteTodo = Todo.findByIdAndDelete(req.params.id, function (err, docs) {     if (err){         console.log(err)     }     else{         console.log("Deleted : ", docs);     } });}); 
Enter fullscreen mode Exit fullscreen mode

Having functions within the API frees up space to make more attractive and interactive Frontend/User Interface.

Resources:

Mongoose: FindByIdAndDelete() Function. (2020, May 20). Retrieved January 07, 2021, from https://www.geeksforgeeks.org/mongoose-findbyidanddelete-function/


Original Link: https://dev.to/uzomezu/mongodb-is-weird-but-i-like-it-25b

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To