Create simple POS with React.js, Node.js, and MongoDB #7: Adding redux to other components

Create simple POS with React.js, Node.js, and MongoDB #7: Adding redux to other component. Blog

Create simple POS with React.js, Node.js, and MongoDB #7: Adding redux to other component

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 part of this tutorial series, we learned how to install the redux configuration into our project. We also got an insight on how to integrate redux to our login component. This tutorial part serves as a continuation of the previous tutorial.

In this tutorial part, we are going to integrate the redux to Register and Forget password component.

Register Component

First, we are going to start with the Register component. The process is the same as that in the Login component. We are going to configure, constants, and reducers into the Register component.

In index.js, we define states for register fetching, success, failed as shown in the code snippet below:

Then, we create a new redux action named register.action.js and the imports as follows:

Next, we are going to create the functions that handle the state changes based on the type of register as shown in the code snippet below:

Now, we go to the register function register in the Register component and attach the dispatch function in order to capture the events. The coding implementation of the function is shown in the code snippet below:

Now, we are going to create the reducer for the register component.

For reducer, we need to create a new file name register.reducer.js. Then, we need to import new state constants and define the initial state as shown in the code snippet below:

The next step is to create a function that will set the value of states based on the register type. The coding implementation of the required function is provided in the code snippet below:

Now in order to activate new reducer, we need to add the reducer file to index file as shown in the code snippet below:

Now, it is time to add the reducer to the register component. The process is the same as that in login component in which we change the class component to functional component.

In component/register.js file, we need to import actions and react-redux plugin as shown in the code snippet below:

Then, we need to change the class component to the functional component and initialize the dispatch function as shown in the code snippet below:

Now, in order to use the register function, we replace the old function with register action that we imported from actions. We integrate the dispatch function with register action as a parameter as shown in the code snippet below:

Hence, we have successfully completed the integration of redux functionality in the Register component of our POS system project.

Thus, we can check out the test result in the simulation below:

POS. Rigister componenet with Redux

POS. Rigister componenet with Redux

As our redux integration in the Register component is complete, We move on to our Forgot password component.

Forgot Password Component

In this part, we are going to integrate the redux mechanism to the forgot and reset password component. The process to similar to that of the register component that we completed above.

Just as in Register component, we define the state constants first as shown in the code snippet below:

Then, we need to create a new action called forgotpassword action and make the necessary imports. We also need to define the functions that handle state changes. Lastly, we need to define the resetpassword function with dispatch function as shown in the code snippet below:

Now, it is time to add the reducer to the Forgot Password component. First, we need to import new state constants and define the initial state.

Then, we need to create a function that will set the value of states based on forgot state types. The coding implementation of the required function is provided in the code snippet below:

Now, we integrate the forgot password reducer in the index file by importing it as shown in the code snippet below:

Then, we need to go to the Forgot password component and modify it to import actions and react-redux:

Then, we need to change the class component to the functional component and then initialize the dispatch function as shown in the code snippet below:

Next, we need to replace the old submit form code with action using dispatch function as shown in the code snippet below:

Hence, we will get the result as shown in the simulation below:

POS. Redux forgot password component

POS. Redux forgot password component

Reset password component

Now in the Reset password component that appears after the Forgot password action, we will apply the same process.

First, we create a new state constant

Second, we are going to create the action file and implement state handler function and resetpassword function as shown in the code snippet below:

Then, we need to create a new reducer file and make the following coding implementations:

Lastly, we need to modify the password reset component the same as the password forgot. First, we need to import react-redux dependency and actions as well.

Then, we convert the component to the functional component and initialize dispatch function:

Then, we replace the old submit form code with the new action configuration with dispatch function as shown in the code snippet below:

Hence, the result of the password reset test is shown in the simulation below:

POS. Reset password component with Redux

POS. Reset password component with Redux

Finally, we have successfully completed the integration of the redux mechanism in both the Forgot Password and Reset Password component.

Conclusion

In this chapter, we learned how to integrate redux to Register, Forgot, and Reset password components. The process was the same as of that in the login component which we did in the previous chapter. Implementing the redux mechanism in different components will infuse deep knowledge and use the case of redux.

In the next chapter, we will learn how to implement CRUD operation with redux by using crud POS machine data.

Nonetheless, you can try out the live demo as well as get the code for this chapter in Github.

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Create simple POS with React, Node and MongoDB #6: Redux Integration

In this chapter, we are going to continue to create our POS system by integrating Redux state management. Redux is a manageable and structured state ...

Create simple POS with React, Node and MongoDB #5: Setup ReCaptcha and define CORS

In this chapter, we will continue from our previous chapters by discussing how to setup ReCaptcha and set up CORS. After publishing our backend and ...

Create Simple POS With React, Node and MongoDB #4: Optimize App and Setup Deployment Workflow

This is the list of the tasks we have to complete during this chapter: separate backend and frontend, add environment variables to the backend, add ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy