An Interest In:
Web News this Week
- March 13, 2024
- March 12, 2024
- March 11, 2024
- March 10, 2024
- March 9, 2024
- March 8, 2024
- March 7, 2024
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);
In the console we would see:
> ['apple', 'orange', 'banana', 'strawberry']
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;
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);
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.'); }})
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); } });});
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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To