{"id":3068,"date":"2016-07-11T14:57:18","date_gmt":"2016-07-11T14:57:18","guid":{"rendered":"http:\/\/www.ckl.io\/?p=3068"},"modified":"2022-07-01T17:56:07","modified_gmt":"2022-07-01T17:56:07","slug":"3-simple-steps-to-improve-react-redux-code","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/","title":{"rendered":"3 simple steps to improve your React Redux code"},"content":{"rendered":"<p>Let&#8217;s face it: developing scalable front-end code isn&#8217;t piece of cake. No matter how well-structured the framework\/architecture you&#8217;re using is, everything will be converted to ye olde HTML, CSS and (vanilla) JS.<\/p>\n<p>Well, the good news is the open-source community already created solid frameworks (like <a href=\"https:\/\/www.ckl.io\/blog\/dont-blame-the-framework-angularjs-and-reactjs\/\">AngularJS and ReactJS<\/a>) to make your life incredibly easier, so you can work on high-level code and nevermind the hardcore stuff.<\/p>\n<p>This brings up a new scenario, though \u2013 after getting used to building things the old-fashioned way (or not-so-old-fashioned, with tools like <a href=\"http:\/\/backbonejs.org\/\"><span style=\"font-weight: 400;\">Backbone.js<\/span><\/a> or <a href=\"http:\/\/emberjs.com\/\"><span style=\"font-weight: 400;\">Ember.js<\/span><\/a>), you&#8217;ve decided to try what is trending on front-end <a href=\"https:\/\/cheesecakelabs.com\/blog\/blog\/building-app-phase-3-product-development\/\">development<\/a> now: <a href=\"https:\/\/facebook.github.io\/react\/\"><span style=\"font-weight: 400;\">ReactJS<\/span><\/a>, using the <a href=\"http:\/\/redux.js.org\/\"><span style=\"font-weight: 400;\">Redux architecture<\/span><\/a>. You got excited with the possibilities this opens (and \u2013 oh my! \u2013 the ability to ditch jQuery once and for all), and, after working for a few weeks you realize that your code is a <strong>total mess<\/strong>.<\/p>\n<p><!--more-->Don&#8217;t be alarmed \u2013 you can fix that. I&#8217;ll share a few insights&nbsp;on how I transformed my Frankenstein into a clean and Redux-compliant codebase, while still being able to deliver new features.<\/p>\n<p>The insights from this article might also be useful for seasoned developers, who want some tips on how to achieve a better-organized and scalable code.<\/p>\n<h2>1. Define the role of your components<\/h2>\n<p>When starting with React+Redux, people tend to build massive components, which contain a whole bunch of logic and connect to many Store states. It is not uncommon to find people treating components as HTML templates &#8212; you have one for each page, and you simply translate the HTML code into JSX in the <code>render()<\/code> function.<\/p>\n<p>Developing things in such way invalidates one important advantage of this pattern, which is the ability to <strong>reuse<\/strong> components throughout your web application, and <strong>propagate<\/strong> state changes when they affect more than one component or page.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-3142 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/components.png\" alt=\"components\" width=\"800\" height=\"443\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/components.png 800w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/components-768x425.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>There are <a href=\"http:\/\/redux.js.org\/docs\/basics\/UsageWithReact.html#presentational-and-container-components\"><span style=\"font-weight: 400;\">two types of components<\/span><\/a> in the React\/Redux architecture: <span style=\"font-weight: 400;\"><a href=\"http:\/\/redux.js.org\/docs\/basics\/UsageWithReact.html#presentational-components\">presentational<\/a>&nbsp;<\/span>and <a href=\"http:\/\/redux.js.org\/docs\/basics\/UsageWithReact.html#container-components\"><span style=\"font-weight: 400;\">container components<\/span><\/a>.<\/p>\n<ul>\n<li><strong>Presentational Components<\/strong>&nbsp;(often referred to as &#8216;dumb components&#8217;) are all-normal ReactJS components, which do not contain any logic or store connection \u2013 they are simply &#8216;views&#8217; to display data. These components usually receive some <code>props<\/code>&nbsp;and display them or trigger actions depending on the user behavior (the actions should be sent as <code>props<\/code> to the components, as no business logic is defined on presentational components).<\/li>\n<li><strong>Container Components<\/strong> (often referred to as &#8216;smart components&#8217;), on the other hand, don&#8217;t do anything visual: they are the ones who&#8217;ll process and pass data to the presentational components. Containers will be the components that connect to the Store&nbsp;and import actions, so you&#8217;ll often see <code>mapDispatchToProps()<\/code> and <code>mapStateToProps()<\/code> definitions inside them.<\/li>\n<\/ul>\n<p>In most cases, developers tend to structure&nbsp;the entire application as a set of container components.&nbsp;In order to fix this, two steps have to be taken:<\/p>\n<h3>1.1. Break your containers into presentational components and container components<\/h3>\n<p>&nbsp;<\/p>\n<p>This will enable you to create several pieces of reusable code, so that your front-end will have a consistent look, and you&#8217;ll force yourself to avoid duplicated code to address similar problems.<\/p>\n<p>Taking this blog&#8217;s index as a reference:<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-3072 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Artboard-2.png\" alt=\"Artboard 2\" width=\"800\" height=\"769\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Artboard-2.png 800w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Artboard-2-768x738.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>We could split it into the following components and containers:<\/p>\n<figure id=\"attachment_3073\" aria-describedby=\"caption-attachment-3073\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-3073 size-full\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Artboard-1.png\" alt=\"Sliced Blog Index\" width=\"800\" height=\"769\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Artboard-1.png 800w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Artboard-1-768x738.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-3073\" class=\"wp-caption-text\">Suggestion of componentization of this blog&#8217;s index. Notice that this is for illustration purposes, as it&#8217;s up to the developer to define the granularity of each visual component.<\/figcaption><\/figure>\n<p>You can observe&nbsp;that it is possible (and fairly common) to put a container inside a container, in order to&nbsp;modularize&nbsp;and structure&nbsp;the code.<\/p>\n<h3>1.2. Center the communication in the containers<\/h3>\n<p>&nbsp;<\/p>\n<p>Your container components are the ones responsible for knowing which actions should be triggered and what state updates they need to receive.<\/p>\n<p>Think of containers as structural components: they are fundamental for your code, but they don&#8217;t mean anything visually &#8212; they just define what data will be presented by the presentational components, and how they should behave.<\/p>\n<h2>2.&nbsp;Decide what state information actually needs to be in the Store<\/h2>\n<p>The idea of having a globally accessible Store with all the variables from the system might sound promising, but listen to me: it&#8217;s a trap!<\/p>\n<p><a href=\"http:\/\/redux.js.org\/docs\/basics\/Store.html\">Store<\/a>&nbsp;states&nbsp;should be used with caution, and&nbsp;not for anything that is used as a presentation variable. In other words, it makes sense to store the username and avatar link <strong>globally<\/strong>, but the enabled\/disabled status of a button in a form might as well live as a<strong> local state<\/strong> of the container component.<\/p>\n<p>There is no 100% accurate rule to define when to use the Store&nbsp;or not, but you should take into account the implications when you decide to go down that road. The Store does not clear data automatically when your router changes context, which might cause unexpected&nbsp;behavior when you go back to a context where you&#8217;ve already taken actions.<\/p>\n<p>To make this less abstract, let&#8217;s think of a search engine where you store the number of the result page and the search term in the Store. You perform a search, go to the third page of results, then click on the&nbsp;&#8216;home&#8217; button (usually the logo) to return to the root search page. Guess what? Your search term is pre-populated in the input box. You delete it, enter a new search term and click on &#8216;search&#8217;. Suprise, again:&nbsp;&nbsp;you&#8217;re already on the third&nbsp;page of the search results. Weird, right?<\/p>\n<p>This is because the&nbsp;application state (Store) will persist as long as you keep the web application open, without caring about expiry time or user behavior. Unless you explicitly clear the data used in a given context, it will remain there and show up when you less expect. I&#8217;m not saying this is always undesirable, but those edge cases must be well-thought when defining what should be put in the Store.<\/p>\n<h2>3. Consider sharing your CSS&nbsp;components&#8217; namespaces<\/h2>\n<p>Many people think of React\/Redux as a new mindset for JavaScript and HTML, and think of CSS as something completely apart \u2013 continuing to develop it the old-fashioned way, i.e., everything in a single CSS (or SCSS, at most) file.<\/p>\n<p>Whether you should use a <span style=\"font-weight: 400;\">React-Friendly JavaScript CSS library<\/span> to write inline CSS, or simply use well-defined <a href=\"https:\/\/www.ckl.io\/blog\/css-architecture-first-steps\/\">CSS Architecture<\/a> is entirely up to you \u2013 just keep in mind that the naming of each component should be consistent on both JS and CSS. This way, you&#8217;ll be able to easily find where the styling of a specific component is defined, and will avoid <a href=\"https:\/\/www.git-tower.com\/learn\/git\/ebook\/en\/command-line\/advanced-topics\/merge-conflicts\">merge conflicts<\/a>&nbsp;when many developers are working in the same codebase.<\/p>\n<h2>Wrapping up<\/h2>\n<p>Improving your code is a continuous effort \u2013 and realizing it needs to be done is a sign that you&#8217;re constantly evolving your skills and mindset. It is usually a good idea to refactor your code gradually, while still delivering new features. I hope this post helps you improve your React code \u2013 please share your opinion in the comments below.<\/p>\n<p><em>Edit: removed the GIFs as many readers suggested \u2013 thanks for the input, guys! \ud83d\ude42<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s face it: developing scalable front-end code isn&#8217;t piece of cake. No matter how well-structured the framework\/architecture you&#8217;re using is, everything will be converted to ye olde HTML, CSS and (vanilla) JS. Well, the good news is the open-source community already created solid frameworks (like AngularJS and ReactJS) to make your life incredibly easier, so [&hellip;]<\/p>\n","protected":false},"author":65,"featured_media":3141,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[432],"tags":[],"class_list":["post-3068","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>3 simple steps to improve your React Redux code<\/title>\n<meta name=\"description\" content=\"Learn how to improve your React Redux code and ensure its scalability and maintainability in the long run through 3 simple steps.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3 simple steps to improve your React Redux code\" \/>\n<meta property=\"og:description\" content=\"Learn how to improve your React Redux code and ensure its scalability and maintainability in the long run through 3 simple steps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-11T14:57:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-01T17:56:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Banner_coderefacting.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/\"},\"author\":{\"name\":\"Alex Cordeiro\"},\"headline\":\"3 simple steps to improve your React Redux code\",\"datePublished\":\"2016-07-11T14:57:18+00:00\",\"dateModified\":\"2022-07-01T17:56:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/\"},\"wordCount\":1196,\"commentCount\":8,\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Banner_coderefacting.jpg\",\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/\",\"name\":\"3 simple steps to improve your React Redux code\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Banner_coderefacting.jpg\",\"datePublished\":\"2016-07-11T14:57:18+00:00\",\"dateModified\":\"2022-07-01T17:56:07+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Alex Cordeiro\"},\"description\":\"Learn how to improve your React Redux code and ensure its scalability and maintainability in the long run through 3 simple steps.\",\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Banner_coderefacting.jpg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Banner_coderefacting.jpg\",\"width\":2000,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3 simple steps to improve your React Redux code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"name\":\"Alex Cordeiro\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/10\/alex-300x300.jpg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/10\/alex-300x300.jpg\",\"caption\":\"Alex Cordeiro\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/alex\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"3 simple steps to improve your React Redux code","description":"Learn how to improve your React Redux code and ensure its scalability and maintainability in the long run through 3 simple steps.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/","og_locale":"en_US","og_type":"article","og_title":"3 simple steps to improve your React Redux code","og_description":"Learn how to improve your React Redux code and ensure its scalability and maintainability in the long run through 3 simple steps.","og_url":"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2016-07-11T14:57:18+00:00","article_modified_time":"2022-07-01T17:56:07+00:00","og_image":[{"width":2000,"height":720,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Banner_coderefacting.jpg","type":"image\/jpeg"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/"},"author":{"name":"Alex Cordeiro"},"headline":"3 simple steps to improve your React Redux code","datePublished":"2016-07-11T14:57:18+00:00","dateModified":"2022-07-01T17:56:07+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/"},"wordCount":1196,"commentCount":8,"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Banner_coderefacting.jpg","articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/","url":"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/","name":"3 simple steps to improve your React Redux code","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Banner_coderefacting.jpg","datePublished":"2016-07-11T14:57:18+00:00","dateModified":"2022-07-01T17:56:07+00:00","author":{"@type":"person","name":"Alex Cordeiro"},"description":"Learn how to improve your React Redux code and ensure its scalability and maintainability in the long run through 3 simple steps.","breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Banner_coderefacting.jpg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/07\/Banner_coderefacting.jpg","width":2000,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/3-simple-steps-to-improve-react-redux-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"3 simple steps to improve your React Redux code"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","name":"Alex Cordeiro","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/10\/alex-300x300.jpg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/10\/alex-300x300.jpg","caption":"Alex Cordeiro"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/cheesecakelabs.com\/blog\/autor\/alex\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/3068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=3068"}],"version-history":[{"count":1,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/3068\/revisions"}],"predecessor-version":[{"id":10337,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/3068\/revisions\/10337"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/3141"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=3068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=3068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=3068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}