add and delete data from db

client/src/components/ItemModal/index.jsx

@@ -4,13 +4,12 @@ import {
   Modal,
   ModalHeader,
   ModalBody,
-  ModalFooter,
   Form,
   FormGroup,
   Label,
   Input,
 } from "reactstrap";
-import { addItem } from "../../store/itemSlice";
+import { addItemAsync } from "../../store/itemSlice";
 import { useDispatch } from "react-redux";
 
 const useStyles = () => ({
@@ -28,7 +27,7 @@ export default function ItemModal() {
   const toggle = () => setModal(!modal);
   const handleSubmit = (e) => {
     e.preventDefault();
-    dispatch(addItem(name));
+    dispatch(addItemAsync(name));
     toggle();
   };
   const handleChange = (e) => setName(e.target.value);

client/src/components/List/index.jsx

@@ -1,7 +1,11 @@
 import React, { useEffect } from "react";
 import { Button, ListGroup, ListGroupItem } from "reactstrap";
 import { useSelector, useDispatch } from "react-redux";
-import { selectItems, deleteItem, getItemsAsync } from "../../store/itemSlice";
+import {
+  selectItems,
+  deleteItemAsync,
+  getItemsAsync,
+} from "../../store/itemSlice";
 
 const useStyles = () => ({
   removeBtn: {
@@ -21,17 +25,17 @@ export default function List() {
   // Precising dependencies so it doesn't render infinitely.
   useEffect(() => {
     dispatch(getItemsAsync());
-  }, [dispatch, getItemsAsync]);
+  }, [dispatch]);
 
   return (
     <ListGroup>
-      {items.map(({ id, name }) => (
-        <ListGroupItem key={id}>
+      {items.map(({ _id, name }) => (
+        <ListGroupItem key={_id}>
           <Button
             style={styles.removeBtn}
             color="danger"
             size="small"
-            onClick={() => dispatch(deleteItem(id))}
+            onClick={() => dispatch(deleteItemAsync(_id))}
           >
             &times;
           </Button>

client/src/store/itemSlice.js

@@ -1,5 +1,4 @@
 import { createSlice } from "@reduxjs/toolkit";
-import { v1 } from "uuid";
 import axios from "axios";
 import { ITEMS_URL } from "./urls";
 
@@ -17,22 +16,41 @@ export const itemSlice = createSlice({
     }),
     addItem: (state, action) => ({
       ...state,
-      items: [...state.items, { id: v1(), name: action.payload }],
+      items: [action.payload, ...state.items],
     }),
     deleteItem: (state, action) => ({
       ...state,
-      items: state.items.filter((i) => i.id !== action.payload),
+      items: state.items.filter((i) => i._id !== action.payload),
     }),
     setItemsLoading: (state) => ({ ...state, loading: true }),
   },
 });
 
+/**
+ * redux-thunk which fetches Items asynchronously from db.
+ */
 export const getItemsAsync = () => async (dispatch) => {
   dispatch(setItemsLoading);
   const { data } = await axios.get(ITEMS_URL);
   dispatch(getItems(data));
 };
 
+/**
+ * Creates a new Item in the db.
+ */
+export const addItemAsync = (name) => async (dispatch) => {
+  const { data } = await axios.post(ITEMS_URL, { name });
+  dispatch(addItem(data));
+};
+
+/**
+ * Deletes Item _id from the db.
+ */
+export const deleteItemAsync = (id) => async (dispatch) => {
+  await axios.delete(`${ITEMS_URL}/${id}`);
+  dispatch(deleteItem(id));
+};
+
 export const {
   getItems,
   addItem,