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;

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:

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:

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:

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:

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

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:

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:

#node.js #pos tutorial #react