{"id":13075,"date":"2020-06-02T10:33:23","date_gmt":"2020-06-02T10:33:23","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=13075"},"modified":"2024-06-06T10:07:45","modified_gmt":"2024-06-06T10:07:45","slug":"embedding-redux-within-react-to-build-scalable-application","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/embedding-redux-within-react-to-build-scalable-application","title":{"rendered":"Embedding Redux Within React to Build Scalable Application (Step-by-Step Guideline)"},"content":{"rendered":"<style>\np{\n   width:100%;\n}\n<\/style>\n<p>Web Development is one of the fascinating areas of the IT industry. There exists a huge repository of tools and libraries, each of which aims at improving the functionality and performance of an application. However, cashing in every new opportunity isn&#8217;t wise unless you have a clear understanding of the same. <\/p>\n<p>Testing and playing with your code is an ideal way to enhance and optimize an application, yet unless you are aware of the change, adopting it is futile. Taking this forward, we here define what <a href=\"https:\/\/www.bacancytechnology.com\/blog\/redux-vs-mobx\" rel=\"noopener\" target=\"_blank\">Redux<\/a> is and how you can leverage the technology to build exceptional apps with React. <\/p>\n<h2>Redux: Defining the Technology<\/h2>\n<p>Going by the <a href=\"https:\/\/redux.js.org\/introduction\/getting-started\" rel=\"noopener\" target=\"_blank\">definition put up by the developers<\/a>, Redux is a predictable state container for JavaScript applications. It is an open-source JavaScript library that is most commonly used with libraries such as React or Angular for building interactive user interfaces. Redux is inspired by Facebook\u2019s architecture.<\/p>\n<p>Breaking the above, Redux is more of a state management tool. Each of the components created using Redux is placed in a store as an independent unit, and the components have the freedom and flexibility to get hold of states as per their directly from the store. <\/p>\n<p>Why there is a need of state management tool?<\/p>\n<p>True that the idea of having a state management tool seems fascinating, one question that a majority of developers ask is there an actual need for Redux?<\/p>\n<p>Let&#8217;s understand taking the example of React. <\/p>\n<p>React is one library that allows components to manage their own state internally without imposing the need to have a third-party tool. Now, this works well when there is a small application as the data shared or passed between components is limited.<\/p>\n<p>Imagine having an application with 100s of interlinked components; managing states internally is no less than a daunting task.  In React, all of the states live in the parent component. Whenever a new update is to be made, the state is passed onto the siblings by the parent component as props. As the number of components increases, the complexities rise to make it practically difficult to manage and hence, the need for a state management tool.<\/p>\n<p>Redux being lightweight and super flexible, stands as one of the best tools to use along with React when building scalable applications. <\/p>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #c7c7c7; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);\"><strong><i><span style=\"font-size:22px; color:#000;\">Looking for scalable and cost-effective React Js application development?<\/span><br \/>\nConnect with us to <a href=\"https:\/\/www.bacancytechnology.com\/hire-reactjs-developer\" target=\"_blank\" rel=\"noopener\">hire Reactjs developer<\/a> to get your job done at your ease and convenience.<\/i><\/strong><\/p>\n<h2>How to Use Redux With React?<\/h2>\n<p>Without much ado, let&#8217;s move ahead to see how you can configure Redux to manage state in React.<\/p>\n<p><strong>Step #1: Build Your React Application<\/strong><\/p>\n<p>To begin with, we will first use create-react-app to build the application. Type in the following command on your terminal to get started with the application: <\/p>\n<pre>\r\ncreate-react-app simple_counter \r\ncd simple_counter\r\n<\/pre>\n<p>The aforementioned command leads to the creation of React boilerplate code. To enter the directory, simply click on the next. In case you are working on a visual studio, follow the instructions given below.<\/p>\n<p>Code.<\/p>\n<p>Now to start the react dev server, open your editor and type: <\/p>\n<pre>\r\nyarn start \r\nOr, \r\nnpm start\r\n<\/pre>\n<p>This will display a screen confirming the start of the application. <\/p>\n<p><strong>Step #2: Library Installation<\/strong><\/p>\n<p>The next thing you need to do is set up all your libraries and tools.  Simply copy-paste the given below code in the src file and start your dev server.<\/p>\n<div id=\"attachment_13076\" style=\"width: 810px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13076\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Library-Installation.png\" alt=\"Library Installation\" width=\"800\" height=\"429\" class=\"size-full wp-image-13076\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Library-Installation.png 800w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Library-Installation-300x161.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Library-Installation-768x412.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Library-Installation-20x11.png 20w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-13076\" class=\"wp-caption-text\">Source: <a href=\"https:\/\/medium.com\/@mahmudahsan\/how-to-use-redux-in-react-application-fd6778575ba7\" rel=\"nofollow  noopener\" class=\"broken_link\" target=\"_blank\">Medium<\/a><br \/><\/p><\/div>\n<p><strong>Step #3: Download Chrome Extension<\/strong><\/p>\n<p>Here, you need to install and set up the Chrome extension of Redux to work along with your server. <\/p>\n<p><strong>Step #4: Importing Libraries<\/strong><\/p>\n<div id=\"attachment_13079\" style=\"width: 810px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13079\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Importing-Libraries.png\" alt=\"Importing Libraries\" width=\"800\" height=\"164\" class=\"size-full wp-image-13079\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Importing-Libraries.png 800w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Importing-Libraries-300x62.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Importing-Libraries-768x157.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Importing-Libraries-20x4.png 20w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-13079\" class=\"wp-caption-text\">Source: <a href=\"https:\/\/medium.com\/@mahmudahsan\/how-to-use-redux-in-react-application-fd6778575ba7\" rel=\"nofollow  noopener\" class=\"broken_link\" target=\"_blank\">Medium<\/a><\/p><\/div>\n<p>Run the above code by embedding the same below CSS in your source file.<\/p>\n<p><\/p>\n<p><strong>Step #5: Architectural Viewpoint<\/strong><\/p>\n<p>Now let&#8217;s understand what the core architecture of Redux is. It has primarily three elements<\/p>\n<p>1. Store<\/p>\n<p>2. Reducer<\/p>\n<p>3. Action<\/p>\n<p>Firstly, a store is created that is home to all of the states. Whether the application state or the global state, it is the store that encompasses all. <\/p>\n<p>Action refers to the passing of the store to the view part. This is analogous to the forwarding of commands or significant instructions.  Actions are transported to the reducer (function), which then refers to the store to extract a state and then modify the same as per the need. The state is then updated to the store as well. <\/p>\n<p><strong>Step #6: Defining Actions <\/strong><\/p>\n<p>To help you understand how actions are defined and the corresponding functionality, we take a simple example of addition and subtraction.<\/p>\n<pre>\r\n\/\/ Actions Type\r\nconst MULTIPLY_NUMBER = 'mul_number';\r\nconst SUBTRACT_NUMBER = 'sub_number';\r\n\/\/ Actions\r\nconst mulAction = () => ({\r\n    type: MULTIPLY_NUMBER,\r\n    payload: 1,\r\n});\r\nconst subAction = () => ({\r\n    type: SUBTRACT_NUMBER,\r\n    payload: 2,\r\n});\r\n<\/pre>\n<p>Here, it is necessary to have a return object of type in every action. If needed, you can pass data using external parameters. <\/p>\n<p><strong>Step #7: Reducer in React<\/strong><\/p>\n<p>Sticking to the example said earlier, we define reducers for the scalable React App.<\/p>\n<div id=\"attachment_13081\" style=\"width: 810px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13081\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Reducer-in-React.png\" alt=\"Reducer in React\" width=\"800\" height=\"391\" class=\"size-full wp-image-13081\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Reducer-in-React.png 800w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Reducer-in-React-300x147.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Reducer-in-React-768x375.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/06\/Reducer-in-React-20x10.png 20w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-13081\" class=\"wp-caption-text\">Source: <a href=\"https:\/\/medium.com\/@mahmudahsan\/how-to-use-redux-in-react-application-fd6778575ba7\" rel=\"nofollow  noopener\" class=\"broken_link\" target=\"_blank\">Medium<\/a><\/p><\/div>\n<p>Here, we have defined a mathReducer that can accept two parameters as state and action. With respect to the state parameter, a default value of 0 is passed, which is used to initialize the value of the state when the store is created for the first time. For the next cases, the value passed is used to update the current state value.<\/p>\n<p><strong>Step #8: Redux Store Creation<\/strong><\/p>\n<p>So, we have action, the libraries, reducer for the application. What&#8217;s left? <\/p>\n<p>The Redux Store. <\/p>\n<p>We will make use of the create store function from the library for your Redux createstore.<\/p>\n<pre>\r\n\/\/ Store\r\nconst store = createStore(\r\n    rootReducer,\r\n    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()\r\n);\r\n<\/pre>\n<p>The above-mentioned store has two parameters. The first is the root reducer, and the second parameter is the code to get the same displayed on the chrome.<\/p>\n<p><strong>Step #9: Props Mapping<\/strong> <\/p>\n<p>Now that we are all set with the elements needed, we will see how to pass the values to the react app or simply dispatch actions. <\/p>\n<pre>\r\n\/\/ mapStateToProps\r\nconst mapStateToProps = (state => {\r\n    return {\r\n        number: state.math.number,\r\n    };\r\n});\r\n\/\/ mapDispatchToProps\r\nconst mapDispatchToProps = dispatch => ({\r\n    multiply: () => dispatch(mulAction()),\r\n    subtract: () => dispatch(subtractAction()),\r\n});\r\n<\/pre>\n<p>Here, we made use of two different functions. One is mapStateToProps, and the other is mapDispatchToProps. <\/p>\n<p><strong>Step #10: Connect and Render Redux<\/strong><\/p>\n<pre>\r\nconst Counter = (props) => (\r\n    < div >\r\n        < h2 >Counter: {props.number}< \/h2 >\r\n        < input type='button' value='multiply' onClick={props.mul} \/ >\r\n        < input type='button' value='subtract' onClick={props.subtract} \/ >\r\n    < \/div >\r\n);\r\nconst ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);\r\nconst App = () => (\r\n    < Provider store={store} >\r\n        < ConnectedCounter \/ >\r\n    < \/Provider >\r\n);\r\n<\/pre>\n<p>This is the final step. We have a counter function created that has separate states as props.number, props.sub, props.mul. Each of the states can be accessed and called as per the need. In case you wish to pass the props: <\/p>\n<p><em>const ContainerCounter = connect(mapStateToProps, mapDispatchToProps); const ConnectedCounter = ContainerCounter(Counter)<\/em><\/p>\n<p>The above code would be placed. <\/p>\n<pre>\r\nconst App = () => (\r\n    < Provider store = {store} >\r\n        < ConnectedCounter \/ >\r\n    < \/Provider >\r\n);\r\n<\/pre>\n<p>This is the final app function, where the store is passed as a parameter to the Provider component.<\/p>\n<p>And your code is now ready to run. You can test the functionality of the app by running the code and entering values to see whether the two are working properly. You can also tweak the actions to perform different functions and see how the app responds.<\/p>\n<h2>Wrapping Up<\/h2>\n<p>Redux adds a great deal of value to the React application. It adds maintainability within the application making it predictable. Not to mention the fact that it simplifies the debugging and testing process of the React application. If you are still skeptical, then get in touch with us, we have the best React Redux developer. Being a globally renowned <a href=\"https:\/\/www.bacancytechnology.com\/reactjs-development\" target=\"_blank\" rel=\"noopener\">reactjs development services<\/a> provider, we have helped hundreds of clients around the world, with the state management solution to improve the performance of their React-Redux application.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web Development is one of the fascinating areas of the IT industry. There exists a huge repository of tools and libraries, each of which aims at improving the functionality and performance of an application. However, cashing in every new opportunity isn&#8217;t wise unless you have a clear understanding of the same. Testing and playing with [&hellip;]<\/p>\n","protected":false},"author":151,"featured_media":13092,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[988,1364],"tags":[],"coauthors":[2429],"class_list":["post-13075","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-application-development"],"acf":[],"modified_by":"Chandresh Patel","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/13075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/151"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=13075"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/13075\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/13092"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=13075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=13075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=13075"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=13075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}