Close Menu
Soshace Digital Blog

    Subscribe to Updates

    Get The Latest News, Updates, And Amazing Offers

    What's Hot
    JavaScript

    Build Real-World React Native App #9 : Implementing Remove Ads Feature

    Trends

    Diam Maecenas Ultricies Mieget Wauris Bibendum Neque

    JavaScript

    Filtering, Sorting and Pagination – Advanced Filtering with React and Redux

    Important Pages:
    • Home
    • About
    • Services
    • Contact Us
    • Privacy Policy
    • Terms & Conditions
    Facebook X (Twitter) Instagram LinkedIn YouTube
    Today's Picks:
    • Scaling Success: Monitoring Indexation of Programmatic SEO Content
    • Leveraging Influencers: Key Drivers in New Product Launches
    • How Privacy-First Marketing Will Transform the Industry Landscape
    • The Impact of Social Proof on Thought Leadership Marketing
    • Balancing Value-Driven Content and Promotional Messaging Strategies
    • Top Influencer Marketing Platforms to Explore in 2025
    • Emerging Trends in Marketing Automation and AI Tools for 2023
    • Strategies to Mitigate Duplicate Content in Programmatic SEO
    Sunday, September 28
    Facebook X (Twitter) Instagram LinkedIn YouTube
    Soshace Digital Blog
    • Home
    • About
    • Services
    • Contact Us
    • Privacy Policy
    • Terms & Conditions
    Services
    • SaaS & Tech

      Maximizing Efficiency: How SaaS Lowers IT Infrastructure Costs

      August 27, 2025

      Navigating Tomorrow: Innovations Shaping the Future of SaaS

      August 27, 2025

      Maximizing Impact: Strategies for SaaS & Technology Marketing

      August 27, 2025
    • AI & Automation

      Enhancing Customer Feedback Analysis Through AI Innovations

      August 27, 2025

      Navigating the Impact of AI on SEO and Search Rankings

      August 27, 2025

      5 Automation Hacks Every Home Service Business Needs to Know

      May 3, 2025
    • Finance & Fintech

      Critical Missteps in Finance Marketing: What to Avoid

      August 27, 2025

      Analyzing Future Fintech Marketing Trends: Insights Ahead

      August 27, 2025

      Navigating the Complex Landscape of Finance and Fintech Marketing

      August 27, 2025
    • Legal & Compliance

      Exploring Thought Leadership’s Impact on Legal Marketing

      August 27, 2025

      Maximizing LinkedIn: Strategies for Legal and Compliance Marketing

      August 27, 2025

      Why Transparency Matters in Legal Advertising Practices

      August 27, 2025
    • Medical Marketing

      Enhancing Online Reputation Management in Hospitals: A Guide

      August 27, 2025

      Analyzing Emerging Trends in Health and Medical Marketing

      August 27, 2025

      Exploring Innovative Content Ideas for Wellness Blogs and Clinics

      August 27, 2025
    • E-commerce & Retail

      Strategic Seasonal Campaign Concepts for Online and Retail Markets

      August 27, 2025

      Emerging Trends in E-commerce and Retail Marketing Strategies

      August 27, 2025

      Maximizing Revenue: The Advantages of Affiliate Marketing for E-Commerce

      August 27, 2025
    • Influencer & Community

      Leveraging Influencers: Key Drivers in New Product Launches

      August 27, 2025

      Top Influencer Marketing Platforms to Explore in 2025

      August 27, 2025

      Key Strategies for Successful Influencer Partnership Negotiations

      August 27, 2025
    • Content & Leadership

      The Impact of Social Proof on Thought Leadership Marketing

      August 27, 2025

      Balancing Value-Driven Content and Promotional Messaging Strategies

      August 27, 2025

      Analyzing Storytelling’s Impact on Content Marketing Effectiveness

      August 27, 2025
    • SEO & Analytics

      Scaling Success: Monitoring Indexation of Programmatic SEO Content

      August 27, 2025

      Strategies to Mitigate Duplicate Content in Programmatic SEO

      August 27, 2025

      Effective Data Visualization Techniques for SEO Reporting

      August 27, 2025
    • Marketing Trends

      How Privacy-First Marketing Will Transform the Industry Landscape

      August 27, 2025

      Emerging Trends in Marketing Automation and AI Tools for 2023

      August 27, 2025

      Maximizing ROI: Key Trends in Paid Social Advertising

      August 27, 2025
    Soshace Digital Blog
    Blog / JavaScript / POS Tutorial / Create simple POS with React.js, Node.js, and MongoDB #8: CRUD POS Machine
    Node.js

    Create simple POS with React.js, Node.js, and MongoDB #8: CRUD POS Machine

    Krissanawat KaewsanmuangBy Krissanawat KaewsanmuangJuly 14, 2020Updated:July 15, 2020No Comments15 Mins Read
    Facebook Twitter Pinterest Telegram LinkedIn Tumblr Email Reddit
    Create simple POS with React.js, Node.js, and MongoDB #8: CRUD POS Machine
    Create simple POS with React.js, Node.js, and MongoDB #8: CRUD POS Machine
    Share
    Facebook Twitter LinkedIn Pinterest Email Copy Link
    Create simple POS with React.js, Node.js, and MongoDB #8: CRUD POS Machine
    Create simple POS with React.js, Node.js, and MongoDB #8: CRUD POS Machine

    Defenition: POS – “Point of Sale”. At the point of sale, the merchant calculates the amount owed by the customer, indicates that amount, may prepare an invoice for the customer (which may be a cash register printout), and indicates the options for the customer to make payment.

    In the previous tutorial, we completed the implementation of the redux mechanism in our register and Forgot Password components. This is the continuation of the same tutorial from where we left off.

    In this tutorial, we move forward to CRUD operations for POS machine data. CRUD stands for Create, Read, Update, and Delete operations. Here, we are going to implement the CRUD operations for POS machine data.

    So, let’s get started!!

    Preparing States

    Frontend

    In this section, we are going to add a new redux function that we want to use.

    First, we start with the preparation of the redux component with the new redux state in constant.js. Then, we add a new state for Delete operation. First, we export the states as shown in the code snippet below;

    // POS Machine
    export const POSMACHINE_FETCHING = "POSMACHINE_FETCHING";
    export const POSMACHINE_SUCCESS = "POSMACHINE_SUCCESS";
    export const POSMACHINE_FAILED = "POSMACHINE_FAILED";
    export const POSMACHINE_CLEAR = "POSMACHINE_CLEAR";

    Next, we are going to create new reducer name posmachine.reducer.js and handle the state dispatches with the following piece of code:

    import {
      POSMACHINE_FETCHING,
      POSMACHINE_SUCCESS,
      POSMACHINE_FAILED,
      POSMACHINE_CLEAR,
    } from "../constants";
    
    const initialState = {
      isFetching: false,
      isError: false,
      result: null,
    };
    
    export default (state = initialState, { type, payload }) => {
      switch (type) {
        case POSMACHINE_FETCHING:
          return { ...state, isFetching: true, isError: false, result: null };
        case POSMACHINE_FAILED:
          return { ...state, isFetching: false, isError: true, result: null };
        case POSMACHINE_SUCCESS:
          return { ...state, isFetching: false, isError: false, result: payload };
        case POSMACHINE_CLEAR:
          return { ...state, result: null, isFetching: false, isError: false };
        default:
          return state;
      }
    };

    Then, we import the new register configuration and combine the reducers with other reducers that we previously implemented. The combined reducer configuration is exported as shown in the code snippet below:

    import posmachineReducer from "./posmachine.reducer";
    export default combineReducers({
      loginReducer,
      registerReducer,
      forgotpasswordReducer,
      resetpasswordReducer,
      posmachineReducer,
    });

    Next, we are going to create a new action file name posmachine.action.js. Then, we need to import states and functions just as in previous chapters. It is similar to previous action files that we have created. But, the only difference is the presence of delete operation. The overall code for this action configuration is provided in the code snippet below:

    import {
      POSMACHINE_FETCHING,
      POSMACHINE_SUCCESS,
      POSMACHINE_FAILED,
      POSMACHINE_CLEAR,
      server,
    } from "../constants";
    import swal from "sweetalert";
    import { httpClient } from "./../utils/HttpClient";
    
    export const setPOSMachineStateToFetching = () => ({
      type: POSMACHINE_FETCHING,
    });
    
    export const setPOSMachineStateToFailed = () => ({
      type: POSMACHINE_FAILED,
    });
    export const setPOSMachineStateToClear = () => ({
      type: POSMACHINE_CLEAR,
    });
    export const setPOSMachineStateToSuccess = (payload) => ({
      type: POSMACHINE_SUCCESS,
      payload,
    });

    Hence, we have completed the Front-end part of the work. Now, we move to the backend.

    Backend

    We need to prepare the backend section before we create a new endpoint. For backend, we are going to create a new schema name pos_machine_schema.js and a new table structure using the mongoose package. The schema and model for the table structure is provided in the code snippet below:

    const mongoose = require("mongoose");
    const schema = mongoose.Schema({
      alias: String,
      serial_number: String,
      created: { type: Date, default: Date.now },
    });
    module.exports = mongoose.model("pos_machines", schema);

    Next, we need to create a new file named api_pos_machine.js. Then, we need to import the following packages and libraries:

    const express = require("express");
    const router = express.Router();
    const POS_Machine = require("./models/pos_machine_schema");
    // new api endpoint start here
    module.exports = router;

    Then, we need to import the new API file to the main API and use it as a middleware as shown in the code snippet below:

    const express = require("express");
    const router = express.Router();
    require("./db");
    router.use(require("./api_auth"));
    router.use(require("./api_pos_machine"));
    module.exports = router;

    Hence, we are done with the backend part as well

    Create Operation

    Here, we are going to implement the create operation. This operation adds new data. First, we are going to start with the frontend then the backend.

    Frontend

    First, we create a new action named create as shown in the code snippet below:

    export const create = (values, history) => {
      return async (dispatch) => {
        dispatch(setPOSMachineStateToFetching());
        const response = await httpClient.post(
          process.env.REACT_APP_API_URL + "pos_machine",
          values
        );
        if (response.data.result == "success") {
          dispatch(setPOSMachineStateToSuccess(response.data));
          swal("Success!", response.data.message, "success").then((value) => {
            dispatch(setPOSMachineStateToClear());
            history.goBack();
            dispatch(index());
          });
        } else if (response.data.result === "error") {
          dispatch(setPOSMachineStateToFailed());
          swal("Error!", response.data.message, "error");
        }
      };
    };

    Then, we need to create a new folder name posmachine_create as that screenshot below:

     New Folder Name: "posmachine_create"
    New Folder Name: “posmachine_create”

    Next, we need to import component and function that we need to use as shown in the code snippet below:

    import React, { useState, useEffect } from "react";
    import { Formik } from "formik";
    import { useSelector, useDispatch } from "react-redux";
    import * as posmachineActions from "../../actions/posmachine.action";
    import { server } from "../../constants";

    Then, we need to create a new redux instance called Pos_machine as shown in the code snippet below:

    const Pos_Machine = (props) => {
      const dispatch = useDispatch();
      const posmachineReducer = useSelector(
        ({ posmachineReducer }) => posmachineReducer
      );

    Here, we created a dispatch and reducer.

    Next, we check the user’s login state with the following piece of code:

    useEffect(() => {
        if (localStorage.getItem(server.TOKEN_KEY) === null) {
          return props.history.push("/login");
        }
      }, []);

    Now, we need to create a new simple form for getting data as shown in the code snippet below:

    const showForm = ({
        values,
        errors,
        touched,
        handleChange,
        handleSubmit,
        isSubmitting,
      }) => {
        return (
          <form onSubmit={handleSubmit}>
            <div className="form-group input-group has-feedback">
              <input
                type="text"
                name="alias"
                onChange={handleChange}
                value={values.alias}
                className="form-control"
                placeholder="POS Machine Alias Name"
                className={
                  errors.alias && touched.alias
                    ? "form-control is-invalid"
                    : "form-control"
                }
              />
              <div class="input-group-append">
                <div class="input-group-text">
                  <span class="fas fa-user"></span>
                </div>
              </div>
              {errors.alias && touched.alias ? (
                <small id="passwordHelp" class="text-danger">
                  {errors.alias}
                </small>
              ) : null}
            </div>
            <div className="form-group input-group has-feedback">
              <input
                type="text"
                name="serial_number"
                onChange={handleChange}
                value={values.serial_number}
                className="form-control"
                placeholder="Serial Number"
                className={
                  errors.serial_number && touched.serial_number
                    ? "form-control is-invalid"
                    : "form-control"
                }
              />
              <div class="input-group-append">
                <div class="input-group-text">
                  <span class="fas fa-user"></span>
                </div>
              </div>
              {errors.serial_number && touched.serial_number ? (
                <small id="passwordHelp" class="text-danger">
                  {errors.serial_number}
                </small>
              ) : null}
            </div>
            <div class="row">
              <div class="offset-md-8 col-4">
                <button
                  type="submit"
                  disabled={isSubmitting}
                  class="btn btn-primary btn-block"
                >
                  Add
                </button>
              </div>
            </div>
          </form>
        );
      };

    Then, we need to create a main UI function which we can definitely copy from prev chapter. The code is provided in the code snippet below:

    return (
        <div class="login-page">
          <div className="register-box">
            <div className="card">
              <div className="card-body register-card-body">
                <p className="login-box-msg">Add Pos Machine Data</p>
    
                <Formik
                  initialValues={{
                    alias: "",
                    serial_number: "",
                  }}
                  onSubmit={(values, { setSubmitting }) => {
               
                    dispatch(posmachineActions.create(values, props.history));
                    setSubmitting(false);
                  }}
                  // validationSchema={Create_Schema}
                >
                  {/* {this.showForm()}            */}
                  {(props) => showForm(props)}
                </Formik>
              </div>
              {/* /.form-box */}
            </div>
            {/* /.card */}
          </div>
        </div>
      );
    };

    Next, we need to register the component to App.js. First, we need to import using the following piece of code:

    import PosMachineCreate from "./components/posmachine_create";

    Then, we need to register a new route as shown below:

             <SecuredRoute
                path="/posmachine/create"
                component={PosMachineCreate}
              />

    Here, when we navigate to http://localhost:3000/posmachine/create, we get the following result:

    Read More:  React Native vs. Flutter: Which One Would Suit You Better?
    Create Form
    Create Form

    Backend

    In the backend part, we need to create a new API endpoint in order to add a new row. For that, we can use the code from the following code snippet:

    router.post("/pos_machine", async (req, res) => {
      try {
        let doc = await POS_Machine.create(req.body);
    
        res.json({
          result: "success",
          message: "Create new POS data Successfully",
        });
      } catch (err) {
        res.json({ result: "error", message: err.errmsg });
      }
    });

    Now, we can try to submit new data. Since we do not have any view in order to see the inserted data, we can open the database GUI to see the new data as shown in the code snippet below:

    Database Row
    Database Row

    Index Operation

    Now, we move on to the index i.e. read operation. First, we are going to implement the backend API endpoint then migrate to the implementation of the frontend part.

    Backend

    Here, we create a new API endpoint as shown in the code snippet below:

    router.get("/pos_machine", async (req, res) => {
      try {
        let data = await POS_Machine.find({}).sort({ created: -1 });
        res.json({
          result: "success",
          message: "Fetch POS data Successfully",
          data: data,
        });
      } catch (err) {
        res.json({ result: "error", message: err.msg });
      }
    });

    Frontend

    Next, we create a new index in order to display data. As in the previous section, we create a new action for fetching data from API in pos_machine.action.js. The code for the action configuration is provided in the code snippet below:

    export const index = () => {
      return async (dispatch) => {
        dispatch(setPOSMachineStateToFetching);
        const response = await httpClient.get(
          process.env.REACT_APP_API_URL + "pos_machine"
        );
        if (response.data.result == "success") {
          // console.log(response.data);
          dispatch(setPOSMachineStateToSuccess(response.data.data));
        } else if (response.data.result === "error") {
          dispatch(setPOSMachineStateToFailed());
          swal("Error!", response.data.message, "error");
        }
      };
    };

    Next, we are going to create a new component name posmachine_index as shown in the screenshot below:

    New Component Name "posmachine_index" 
    New Component Name “posmachine_index”

    Then, we import the necessary components:

    import React, { useState, useEffect } from "react";
    import * as posmachineActions from "../../actions/posmachine.action";
    import { server } from "../../constants";
    import { useSelector, useDispatch } from "react-redux";
    import { Link } from "react-router-dom";
    import swal from "sweetalert";

    And create a new functional component called Pos_Machine_Index . Then, we create a new instance from the hook as shown in the code snippet below:

    const Pos_Machine_Index = (props) => {
      const posmachineReducer = useSelector(
        ({ posmachineReducer }) => posmachineReducer
      );
      const dispatch = useDispatch();

    Here, we add middleware to detect login token and launch action in order to get data from API. The code for this operations is provided in the code snippet below:

    useEffect(() => {
        if (localStorage.getItem(server.TOKEN_KEY) === null) {
          return props.history.push("/login");
        }
        dispatch(posmachineActions.index());
      }, []);

    In the UI part, we create a new table and use simple for loop to display data in rows. The code to do this is provided in the code snippet below:

    <div className="card-body table-responsive p-0">
                      <table className="table table-hover text-nowrap">
                        <thead>
                          <tr>
                            <th>Alias</th>
                            <th>Serial Name</th>
                            <th>Created Date</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody>
                          {posmachineReducer.result ? (
                            posmachineReducer.result.map((data, index) => {
                              return (
                                <tr key={index}>
                                  <td>{data.alias}</td>
                                  <td>{data.serial_number}</td>
                                  <td>{data.created}</td>
                                  <td>
                                    <Link to={"/posmachine/update/" + data._id}>
                                      Edit
                                    </Link>
                                    {" | "}
                                    <Link onClick={() => confirmDelete(data._id)}>
                                      Delete
                                    </Link>
                                  </td>
                                </tr>
                              );
                            })
                          ) : (
                            <td></td>
                          )}
                        </tbody>
                      </table>
                    </div>

    Now, if we navigating to http://localhost:3000/posmachine, we also see data and link to other activities as shown in the screenshot below:

    Index Screen
    Index Screen

    Thus, the index operation ends here, Now, we move on to implement edit operation that is available in the row of data as shown in the screenshot above.

    Edit Operation

    In the edit section, we will fetch data and populate it to form. Then we can perform the update operation.

    Populate form

    In order to fetch data, we will get the id when we click on index row then pass it to action and perform a request for query data from API.

    In posmachine.action.js, we need to create a new function to receive id then fetch from API. If successful, we store data to the state.The coding implementation for this is provided in the code snippet below:

    export const getPosMachineById = (id) => {
      return async (dispatch) => {
        dispatch(setPOSMachineStateToFetching());
        const response = await httpClient.get(
          process.env.REACT_APP_API_URL + "pos_machine/" + id
        );
        if (response.data.result == "success") {
          dispatch(setPOSMachineStateToSuccess(response.data.data));
        } else if (response.data.result === "error") {
          dispatch(setPOSMachineStateToFailed());
          swal("Error!", response.data.message, "error");
        }
      };
    };

    Next, we need to create new component name posmachine_update as shown in the screenshot below:

     New Component Name "posmachine_update"
    New Component Name “posmachine_update”

    Here, we can copy everything from the posmachine_create component.

    Read More:  React Lesson 7: Redux

    in order to fetch data, we call the action when componentWillMount fires as shown in the code snippet below:

    useEffect(() => {
        if (localStorage.getItem(server.TOKEN_KEY) === null) {
          return props.history.push("/login");
        }
        const { id } = props.match.params;
    
        dispatch(posmachineActions.getPosMachineById(id));
      }, []);

    Now, we can observe that we capture params and extract id then pass to action that we created.

    Next important part is to add data that we send to server from Formik as shown in the code snippet below:

                <Formik
                  enableReinitialize={true}
                  initialValues={
                    posmachineReducer.result
                      ? posmachineReducer.result
                      : { alias: "", serial_number: "" }
                  }

    enableReinitialize allows us to repopulate form again. This is because the form will load success until we send a request for getting data.

    initialValues, we store data from API to state and initialize posmachineReducer.result as null. Hence, we use conditions to prevent errors.

    Backend

    Here, we need to create a new endpoint that captures id and use query to get data and send back to the client. The implementation is provided in the code snippet below:

    router.get("/pos_machine/:id", async (req, res) => {
      try {
        let data = await POS_Machine.findById({ _id: req.params.id });
        res.json({
          result: "success",
          message: "Fetch Single POS data Successfully",
          data: data,
        });
      } catch (err) {
        res.json({ result: "error", message: err.msg });
      }
    });

    Now, we can click the link and see that the data will populate the form as shown in the simulation below:

    Populate Form Result
    Populate Form Result

    We are not done yet.

    Now, we need to create a new endpoint in order to update data by receiving the id then query and update data. We can do this by using the code in the code snippet given below:

    router.put("/pos_machine", async (req, res) => {
      try {
        let doc = await POS_Machine.findByIdAndUpdate(
          { _id: req.body._id },
          req.body
        );
    
        res.json({
          result: "success",
          message: "Update POS data Successfully",
        });
      } catch (err) {
        res.json({ result: "error", message: err.msg });
      }
    });

    Back to the frontend, we create a new action named update in posmachine.action.js. Here we can just copy code from create function but change from post to put method as shown in the code snippet below:

    export const update = (values, history) => {
      return async (dispatch) => {
        dispatch(setPOSMachineStateToFetching());
        const response = await httpClient.put(
          process.env.REACT_APP_API_URL + "pos_machine",
          values
        );
        if (response.data.result == "success") {
          dispatch(setPOSMachineStateToClear());
          history.goBack();
          dispatch(index());
        } else if (response.data.result === "error") {
          dispatch(setPOSMachineStateToFailed());
          swal("Error!", response.data.message, "error");
        }
      };
    };

    Then, when the update is a success, we clear all data in the state by calling setPOSMachineStateToClear action then redirect to index.

    Then, we use call index action for fetching new data again.

    After that, we call update action in UI as shown in the code snippet below:

                 <Formik
                  enableReinitialize={true}
                  initialValues={
                    posmachineReducer.result
                      ? posmachineReducer.result
                      : { alias: "", serial_number: "" }
                  }
                  onSubmit={(values, { setSubmitting }) => {
                    console.log(values);
                    dispatch(posmachineActions.update(values, props.history));
                    setSubmitting(false);
                  }}

    Now, we can perform the update operation as shown in the simulation screenshot below:

    Performing the Update Operation
    Performing the Update Operation

    This completes our Edit/Update operation. Now, its time for delete operation.

    Delete Operation

    Delete operation is simpler than the rest. We just click the link in the index then popup the confirm dialog in order to delete the data. Then, we fetch data new again to display the remaining data.

    Frontend

    In posmachine.action.js, we need to add a new function called remove as shown in the code snippet below:

    export const remove = (id) => {
      return async (dispatch) => {
        console.log("remove");
        dispatch(setPOSMachineStateToFetching());
        const response = await httpClient.delete(
          process.env.REACT_APP_API_URL + "pos_machine/" + id
        );
        if (response.data.result == "success") {
          dispatch(setPOSMachineStateToSuccess());
          dispatch(index());
        } else if (response.data.result === "error") {
          dispatch(setPOSMachineStateToFailed());
          swal("Error!", response.data.message, "error");
        }
      };
    };

    Here, we call the delete function of httpClient module.

    Backend

    Here, we need to create a new API endpoint then use findOneAndDelete option provided by the mongoose package. The coding implementation is provided in the code snippet below:

    router.delete("/pos_machine/:id", async (req, res) => {
      // console.log(req.params.id);
      try {
        let response = await POS_Machine.findOneAndDelete({ _id: req.params.id });
    
        res.json({
          result: "success",
          message: "Delete POS data Successfully",
        });
      } catch (err) {
        res.json({ result: "error", message: err.msg });
      }
    });

    Lastly, we need to create a function as the confirmation for the deletion of data. The implementation of the function is shown in the code snippet below

    function confirmDelete(id) {
        swal({
          title: "Are you sure?",
          text: "Once deleted, you will not be able to recover this data!",
          icon: "warning",
          buttons: true,
          dangerMode: true,
        }).then((willDelete) => {
          if (willDelete) {
            dispatch(posmachineActions.remove(id));
            swal("Poof! Your POS Machine data has been deleted!", {
              icon: "success",
            });
          }
        });
      }

    Now, we need to call the function when the user clicks on delete option as shown in the code snippet below:

    return (
                                <tr key={index}>
                                  <td>{data.alias}</td>
                                  <td>{data.serial_number}</td>
                                  <td>{data.created}</td>
                                  <td>
                       <Link to={"/posmachine/update/" + data._id}>
                                      Edit
                                    </Link>
                                    {" | "}
                    <Link onClick={() => confirmDelete(data._id)}>
                                      Delete
                                    </Link>
                                  </td>
                                </tr>
                              );
                            })
                          ) : (
                            <td></td>
                          )}
                        </tbody>

    Hence, we can perform the delete operation now as shown in the simulation screenshot below:

    Perform the Delete Pperationion
    Perform the Delete Pperationion

    Hence, we have successfully implemented the CRUD operation for the POS machine data.

    Conclusion

    In this chapter, we learned about the CRUD operations that can be performed in coordination between the frontend redux actions and the backend API endpoints. The routes and components were also created to add, display, update, and delete the POS machine data. Well, this chapter was a simple one. In the next chapter, we are going to step it up a notch by adding validations to the CRUD operations.

    The code for this chapter is available in Github for Frontend and Backend.

    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Krissanawat Kaewsanmuang
    • Website
    • X (Twitter)

    Developer Relation @instamobile.io

    Related Posts

    An Introduction to Clustering in Node.js

    March 26, 2024

    JAMstack Architecture with Next.js

    March 15, 2024

    Rendering Patterns: Static and Dynamic Rendering in Nextjs

    March 7, 2024
    Leave A Reply Cancel Reply

    You must be logged in to post a comment.

    Stay In Touch
    • Facebook
    • Twitter
    • Pinterest
    • Instagram
    • YouTube
    • Vimeo
    Don't Miss
    Blogs November 24, 2024

    Strategies for Cultivating a Robust Talent Pool

    Effective talent cultivation begins with a clear employer brand, ongoing skills development, and targeted recruitment strategies. By fostering a culture of growth and inclusivity, organizations can attract and retain a diverse, highly skilled workforce.

    Optimizing LinkedIn: A Strategic Lead Generation Funnel Approach

    November 27, 2024

    Project Manager Role

    June 1, 2016

    React Lesson 13 Part 2: Asynchronous actions

    July 6, 2020

    Categories

    • AI & Automation
    • Angular
    • ASP.NET
    • AWS
    • B2B Leads
    • Beginners
    • Blogs
    • Business Growth
    • Case Studies
    • Comics
    • Consultation
    • Content & Leadership
    • CSS
    • Development
    • Django
    • E-commerce & Retail
    • Entrepreneurs
    • Entrepreneurship
    • Events
    • Express.js
    • Facebook Ads
    • Finance & Fintech
    • Flask
    • Flutter
    • Franchising
    • Funnel Strategy
    • Git
    • GraphQL
    • Home Services Marketing
    • Influencer & Community
    • Interview
    • Java
    • Java Spring
    • JavaScript
    • Job
    • Laravel
    • Lead Generation
    • Legal & Compliance
    • LinkedIn
    • Machine Learning
    • Marketing Trends
    • Medical Marketing
    • MSP Lead Generation
    • MSP Marketing
    • NestJS
    • Next.js
    • Node.js
    • Node.js Lessons
    • Paid Advertising
    • PHP
    • Podcasts
    • POS Tutorial
    • Programming
    • Programming
    • Python
    • React
    • React Lessons
    • React Native
    • React Native Lessons
    • Recruitment
    • Remote Job
    • SaaS & Tech
    • SEO & Analytics
    • Soshace
    • Startups
    • Swarm Intelligence
    • Tips
    • Trends
    • Vue
    • Wiki
    • WordPress
    Top Posts

    21. Node.js Lessons. Writable Response Stream (res), Pipe Method. Pt.2

    Programming October 28, 2016

    Maximizing Hiring Efficiency: A Guide to Recruitment Software

    Recruitment November 28, 2024

    Top React JS Interview Questions

    JavaScript October 18, 2018

    Node.js Lesson 14: Asynchronous Development

    JavaScript January 6, 2021

    Subscribe to Updates

    Get The Latest News, Updates, And Amazing Offers

    About Us
    About Us

    Soshace Digital delivers comprehensive web design and development solutions tailored to your business objectives. Your website will be meticulously designed and developed by our team of seasoned professionals, who combine creative expertise with technical excellence to transform your vision into a high-impact, user-centric digital experience that elevates your brand and drives measurable results.

    7901 4th St N, Suite 28690
    Saint Petersburg, FL 33702-4305
    Phone: 1(877)SOSHACE

    Facebook X (Twitter) Instagram Pinterest YouTube LinkedIn
    Our Picks
    Startups

    Crafting an Effective Marketing Strategy for Your Startup

    JavaScript

    Monthly Digest of the Most Popular and Trending JS GitHub Repos

    Programming

    Web Workers: Concurrency In Java Script

    Most Popular

    Новичкам

    Wiki

    Crafting a High-Performing Team: A Startup’s Essential Guide

    Entrepreneurship

    Interview with Viktor

    Interview
    © 2025 Soshace Digital.
    • Home
    • About
    • Services
    • Contact Us
    • Privacy Policy
    • Terms & Conditions

    Type above and press Enter to search. Press Esc to cancel.