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

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

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

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 chapters, we completed the setup of the Recaptcha protected frontend and backend. 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 container for JavaScript applications. It can be easily used with React. The Redux store enables you to manage the state variables globally. It helps the applications to behave consistently, run in different environments, and test easily. In this chapter, we are going to make use of redux-devtools as well. Redux devtools enables hot reloading, action replay, and customizable UI of our React-based application. It powers up the Redux development workflow or any other architecture which handles the state change.

Why Redux ..??

Sharing data between the components of the project can be difficult. The data connected to different parts of the component may change. The change may occur from any component. The change must be synchronized so that the change from one component is visible to every other component. You can imagine redux like a distributed database in which all application doesn’t have their own local database. The data is synchronized to a central database so that each and every machine receives the updated data. This solves the problem of multiple components.

Compare redux in distribute database

Compare redux in distribute database

In the absence of Redux state management, the variables and function of each component will be stored in the component themselves difficult to synchronize between different components. Using redux, this problem can be easily solved as the state variables and functions are kept in a centralized redux store rather than in components. The components can access these state variables in store using actions and reducers as shown in the redux state management flow diagram below:

Element of redux

Element of redux

Reducer

Reducers defines the way in which the application’s state changes in response to actions sent to the store.

Actions

Actions are functions that are accessed or triggered by components to send data from your application to your store.

Store

Store is an object that integrates the cooperation of both reducers and actions. It is the location that holds the application state.

Show how function and state change role name after using redux

Show how function and state change role name after using redux

Here, we have got an overview of what redux state management is. You can go into the depth of the redux state management mechanism in any other articles out there. Now, we are going to install the redux into our react project.

In order to install the redux with all its required dependencies into our project, we need to run the command from the following code snippet into our projects command prompt:

redux – main redux package for state management
react-redux – Official React bindings for Redux. for more info check out react-redux site
redux-thunk – Redux Thunk middleware allows you to write action creators that return a function instead of an action.
redux-logger – Simply description is the log for redux

Redux for the first component

First, we are going to integrate redux functionality into our login component. For that, we are going to create constant to store environment variables and create a folder named constant and index.js inside it as shown in the screenshot below:

Constant file location

Constant file location

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

In order to make things easier later, we define additional environment variables to contain route information and required URLs:

Actions

Now, we are going to move into implementing actions. First, we need to create a file named HttpClient. This file should contain the functions that hold any request by attaching a token to the request. It the token is not available then the server returns 401 error. Now, we need to refresh the token. If the server returns 403 error then, we need to force the user to re-login. The overall code to implement this is shown in the code snippet below:

Now, we are going to add the function to check the login state. For this, we use the token store in localStorage. If the token is available in local storage then, the user is logged in else the user is not. The code for this function is provided in the code snippet below:

The function to check the login state is to be stored in the login.action.js file under the actions folder as shown in the screenshot below:

Action file location

Action file location

Next, we need to import or constants and functions as shown in the code snippet below:

After the imports, we need to define the functions which will change the login states as shown in the code snippet below:

Next, we need to implement the login function. For this, we create a function called login taking value and history as parameters and then navigate out from the login component. We use the dispatch function in order to change the login state and add the changed state data to the store. The overall code to implement this login function is provided in the code snippet below:

Reducer

We use reducers to change the state of variables in the application. In reducer, we import the constant states and initialize them to the default value. Then, we change the state based on the login type as shown in the code snippet below:

Plug redux to login component

In this step, we are going to integrate the redux functionality to our login component. But first, we need to change the class component to functional component in our login component so that we are able to use useSelector and useDispatch to set and manage the state variables.

Now, we need to import the react-redux library which provides the useSelector and useDispatch modules as shown in the code snippet below:

Next, we define the login function component and start using loginReducers as shown in the code snippet below:

In order to trigger actions, we use the dispatch method to call the login function from loginActions  as shown in the code snippet below:

We are done with integrating the redux state management mechanism to the Login component. But, we still need to integrate it into the root component.

Integrating redux in the root component

For that, in the root index.js file, we import the redux library and required dependencies as shown in the code snippet below:

Now, we need to add the redux-thunk and redux-logger to the middleware based on production condition as shown in the code snippet below:

Next, we need to plug reducer and middleware to the app as sown in the code snippet below:

Lastly, in our App.js file, we have to check the login state. For that, we need to import the login action module as well as react-redux:

Then, we need to change the component type from class to functional and we use isLoggedIn state which we import from actions module as shown in the code snippet below:

Based on the isLoggedIn state, the UI components like header and sidebar are displayed.

Finally, we have successfully integrated the redux state management mechanism to our react POS project. In order to test the integration, we need to open the developer tools in the browser and check for state change logs as shown in the simulation below:

Show how redux work under the hood

Show how redux work under the hood

Conclusion

In this chapter, we got a brief inside of the redux state mechanism. The problem that comes into play without the redux state management system and how the redux mechanism solves that problem by providing the centralized store. Then, we moved to integrate the redux state management into our project thus implementing constants, actions, reducers, and a store. Then, we made use of the reducers, actions, and constants in the login component. We also learned the integration of redux in our root component. Hence based on the app state, we displayed the required UI to the user.

your can find live demo here and all code in this chapter available on Github

In the next chapter, we will add redux to register and logout components.

Credit

cashier image in cover image from logomakr

redux diagram image from dev.to article

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.js, Node.js, and MongoDB #17: Stat screen

Now, we are going to implement the final chapter for this tutorial series where we are implementing a graphical representation section on our ...

Create simple POS with React.js, Node.js, and MongoDB #16: Order Screen

In this chapter, we are going to create an order page. The order page displays the products and the calculator to help calculate the total price. ...

Create simple POS with React.js, Node.js, and MongoDB #15: Simple RBAC

In this chapter, we are going to continue from where we left off from the previous chapter intuitive with a plethora of ...

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