{"id":29,"date":"2020-06-22T18:07:44","date_gmt":"2020-06-22T18:07:44","guid":{"rendered":"http:\/\/akildy.com\/themes\/sommet\/?p=29"},"modified":"2023-02-03T11:07:58","modified_gmt":"2023-02-03T11:07:58","slug":"a-practical-guide-to-redux","status":"publish","type":"post","link":"https:\/\/lorenstewart.me\/a-practical-guide-to-redux\/","title":{"rendered":"A Practical Guide to Redux"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"29\" class=\"elementor elementor-29\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7c70ca90 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7c70ca90\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2e724c03\" data-id=\"2e724c03\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-201de81a elementor-widget elementor-widget-text-editor\" data-id=\"201de81a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.10.2 - 29-01-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#818a91;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#818a91;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<!-- wp:paragraph -->\n<p><strong>What is Redux?<\/strong><br \/>Redux is a state management library that lets you connect directly to application state from anywhere in your app. It also allows you manipulate application state from anywhere in your app. But, to work its magic, Redux requires that your app have a single data store.<\/p>\n<p>This post focuses on using Redux in a React app.<\/p>\n<!-- \/wp:paragraph --><!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><!-- wp:paragraph -->\n<p>This post has three parts:<\/p>\n<p>Boilerplate<br \/>Elements of Redux (the bulk of this post)<br \/>Sample app (an adorable, err, I mean super-tough Most Wanted list app)<br \/>Clone the repo.<\/p>\n<!-- \/wp:paragraph --><\/blockquote>\n<!-- \/wp:quote --><!-- wp:paragraph -->\n<p><strong>Check out the Demo<\/strong>.<\/p>\n<p>If you want type out the code yourself, you can get started by initializing a new project with:create-react-app &lt;project-name&gt;<\/p>\n<p>When create-react-app is done setting up, cd into the folder and:npm install &#8211;save redux react-redux axios.Axios has nothing to do with Redux, but it&#8217;s the library used for AJAX calls in the demo app.<\/p>\n<p>(If you don&#8217;t have create-react-app installed, first run npm install -g create-react-app.)<\/p>\n<p><strong>What problem does Redux solve?<\/strong><br \/>In a React app, data is fetched in an parent component and then passed down to child components through props.<\/p>\n<p>Things get complicated when there are many layers of components and data\/state (and the functions that modify this state) are passed through numerous components to get from origin to destination. This path can be difficult to remember and it leaves many places for errors to be introduced.<\/p>\n<p>With Redux, any component can be connected directly to state.<br \/>This isn&#8217;t to say that data is no longer passed down from parent components to child components via props. Rather, this path can now be direct, no passing props down from parent to great-great-great-great-great-great-grandchild.<\/p>\n<p>It&#8217;s not good practice to have all components connect to application state. It is best to have parent\/container components connect to state and pass state directly to children.<\/p>\n<p>Terminology: Components connected to state are usually called &#8216;container&#8217; or &#8216;smart&#8217; components, and they usually execute logic too. Components that do not have state of their own, and receive state from container components care called &#8216;dumb&#8217; components. Sometimes these dumb components are functional components. Both container components and functional components are implemented in the demo app. (NewUserFace.js and Toast.js are functional components.)<\/p>\n<p>Technically an action creator only needs to fire off Redux&#8217;s dispatch function along with an object. That&#8217;s not quite what&#8217;s going on here. In the code above, the main function (addPerson) dispatches another function (addPersonAync). This second function is called a thunk, and it returns the object\/action.<\/p>\n<p>Terminology: In the context of redux-thunk, a thunk is a second function that performs delayed logic by being asynchronously returned by a first function.<\/p>\n<p>What&#8217;s up with that? That&#8217;s the Thunk middleware at work. This double function strategy allows us to wait for an asynchronous operation (like fetching data) to complete, and then the action is returned by the thunk.<\/p>\n<p>The adjusted order, including reducers, is: dispatch\u00a0 action creator\u00a0 thunk\u00a0 action\u00a0 reducer.<\/p>\n<p>In this case the double function strategy isn&#8217;t necessary, but it&#8217;s a general pattern to follow so if an operation is asynchronous, you&#8217;re already set up to deal with it.<\/p>\n<p>Here&#8217;s a case in which an async operation is actually taking place. Below is the code for fetching the data for the demo app&#8217;s Most Wanted List.<\/p>\n<!-- \/wp:paragraph -->\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>What is Redux?Redux is a state management library that lets you connect directly to application&#8230;<\/p>\n","protected":false},"author":1,"featured_media":40,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/lorenstewart.me\/wp-json\/wp\/v2\/posts\/29"}],"collection":[{"href":"https:\/\/lorenstewart.me\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lorenstewart.me\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lorenstewart.me\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lorenstewart.me\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":6,"href":"https:\/\/lorenstewart.me\/wp-json\/wp\/v2\/posts\/29\/revisions"}],"predecessor-version":[{"id":2136,"href":"https:\/\/lorenstewart.me\/wp-json\/wp\/v2\/posts\/29\/revisions\/2136"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lorenstewart.me\/wp-json\/wp\/v2\/media\/40"}],"wp:attachment":[{"href":"https:\/\/lorenstewart.me\/wp-json\/wp\/v2\/media?parent=29"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lorenstewart.me\/wp-json\/wp\/v2\/categories?post=29"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lorenstewart.me\/wp-json\/wp\/v2\/tags?post=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}