<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<base href="https://issues.jboss.org">
<title>Message Title</title>
</head>
<body class="jira" style="color: #333333; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.429">
<table id="background-table" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f5f5f5; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt" bgcolor="#f5f5f5">
<!-- header here -->
<tbody>
<tr>
<td id="header-pattern-container" style="padding: 0px; border-collapse: collapse; padding: 10px 20px">
<table id="header-pattern" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tbody>
<tr>
<td id="header-avatar-image-container" valign="top" style="padding: 0px; border-collapse: collapse; vertical-align: top; width: 32px; padding-right: 8px" width="32"> <img id="header-avatar-image" class="image_fix" src="https://static.jboss.org/developer/gravatar/6fbd687f47f43fa6e295c4976f9c9578?d=mm&s=48" height="32" width="32" border="0" style="border-radius: 3px; vertical-align: top"> </td>
<td id="header-text-container" valign="middle" style="padding: 0px; border-collapse: collapse; vertical-align: middle; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 1px"> <a class="user-hover" rel="damurphy" id="email_damurphy" href="https://issues.jboss.org/secure/ViewProfile.jspa?name=damurphy" style="color:#0052cc;; color: #3b73af; text-decoration: none">Damien Murphy</a> <strong>edited a comment</strong> on <a href="https://issues.jboss.org/browse/AEROGEAR-8523" style="color: #3b73af; text-decoration: none"><img src="cid:jira-generated-image-avatar-5417bce6-80c4-4287-a44c-fc580322dc8e" height="16" width="16" border="0" align="absmiddle" alt="Sub-task"> AEROGEAR-8523</a> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td id="email-content-container" style="padding: 0px; border-collapse: collapse; padding: 0 20px">
<table id="email-content-table" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: separate">
<tbody>
<tr>
<!-- there needs to be content in the cell for it to render in some clients -->
<td class="email-content-rounded-top mobile-expand" style="padding: 0px; border-collapse: collapse; color: #ffffff; padding: 0 15px 0 16px; height: 15px; background-color: #ffffff; border-left: 1px solid #cccccc; border-top: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 0; border-top-right-radius: 5px; border-top-left-radius: 5px; height: 10px; line-height: 10px; padding: 0 15px 0 16px; mso-line-height-rule: exactly" height="10" bgcolor="#ffffff"> </td>
</tr>
<tr>
<td class="email-content-main mobile-expand " style="padding: 0px; border-collapse: collapse; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-top: 0; border-bottom: 0; padding: 0 15px 0 16px; background-color: #ffffff" bgcolor="#ffffff">
<table class="page-title-pattern" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tbody>
<tr>
<td style="vertical-align: top;; padding: 0px; border-collapse: collapse; padding-right: 5px; font-size: 20px; line-height: 30px; mso-line-height-rule: exactly" class="page-title-pattern-header-container"> <span class="page-title-pattern-header" style="font-family: Arial, sans-serif; padding: 0; font-size: 20px; line-height: 30px; mso-text-raise: 2px; mso-line-height-rule: exactly; vertical-align: middle"> <a href="https://issues.jboss.org/browse/AEROGEAR-8523" style="color: #3b73af; text-decoration: none">Re: Upskill in Redux [DM]</a> </span> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td id="text-paragraph-pattern-top" class="email-content-main mobile-expand comment-top-special-margin comment-top-pattern" style="padding: 0px; border-collapse: collapse; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-top: 0; border-bottom: 0; padding: 0 15px 0 16px; background-color: #ffffff; border-bottom: none; padding-bottom: 0" bgcolor="#ffffff">
<table class="text-paragraph-pattern" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 2px">
<tbody>
<tr>
<td class="text-paragraph-pattern-container mobile-resize-text " style="padding: 0px; border-collapse: collapse; padding: 0 0 10px 0; padding-top: 10px"> <span class="diffcontext">Worked on this yesterday evening & night. <br><br>Simple example of implementing redux in an application [here|https://bitbucket.org/murchu/react-redux-example/src/master/].<br><br>Core essentials of redux are the concepts of a centralised store for all state data, reducer functions whose role is to create a new updated state and swap with the current state, and actions which are the triggers in our app to send intents to redux to update our state.<br><br>A high level overview of redux would be that it houses all the state for your application, and components that need to access/ modify that state do so by implementing 2 methods (</span> <span class="diffaddedchars" style="background-color:#ddfade;">[</span> <span class="diffcontext">mapStateToProps()</span> <span class="diffaddedchars" style="background-color:#ddfade;">|https://github.com/damienomurchu/react-redux-example/blob/master/src/components/Clicker.js#L18-L25]</span> <span class="diffcontext"> and</span> <span class="diffaddedchars" style="background-color:#ddfade;"> [</span> <span class="diffcontext"> mapDispatchToProps()</span> <span class="diffaddedchars" style="background-color:#ddfade;">|https://github.com/damienomurchu/react-redux-example/blob/master/src/components/Clicker.js#L27-L38]</span> <span class="diffcontext"> ) and connecting the component to the redux store via</span> <span class="diffaddedchars" style="background-color:#ddfade;"> [</span> <span class="diffcontext"> a connect() method</span> <span class="diffaddedchars" style="background-color:#ddfade;">|https://github</span> <span class="diffcontext">.</span> <span class="diffremovedchars" style="background-color:#ffe7e7;text-decoration:line-through;"> <br></span> <span class="diffaddedchars" style="background-color:#ddfade;">com/damienomurchu/react-redux-example/blob/master/src/components/Clicker.js#L40-L41]</span> <span class="diffcontext"><br></span> <span class="diffaddedchars" style="background-color:#ddfade;"><br></span> <span class="diffcontext">If a component needs to access state from the redux store, you specify what state properties you need to access in mapStateToProps() where you</span> <span class="diffaddedchars" style="background-color:#ddfade;"> [</span> <span class="diffcontext"> map that property to a prop</span> <span class="diffaddedchars" style="background-color:#ddfade;">|https://github.com/damienomurchu/react-redux-example/blob/master/src/components/Clicker.js#L23]</span> <span class="diffcontext"> which redux makes accessible to the component. To update a property in the global state you do so in mapDispatchToProps() where you</span> <span class="diffaddedchars" style="background-color:#ddfade;"> [</span> <span class="diffcontext"> specify & implement your intent to change the state via a dispatch</span> <span class="diffaddedchars" style="background-color:#ddfade;">|https://github.com/damienomurchu/react-redux-example/blob/master/src/components/Clicker.js#L33-L35]</span> <span class="diffcontext"> which is then processed by the</span> <span class="diffaddedchars" style="background-color:#ddfade;"> [</span> <span class="diffcontext"> reducer</span> <span class="diffremovedchars" style="background-color:#ffe7e7;text-decoration:line-through;"> functions</span> <span class="diffaddedchars" style="background-color:#ddfade;"> function(s)|https://github.com/damienomurchu/react-redux-example/blob/master/src/main.js#L10-L18]</span> <span class="diffcontext"> you've specified.<br><br>Few other notable things:<br>- it is preferred to create just one redux store (a single source of truth), and use this to track all the state in your application<br>- if a component is connected to the redux store, redux will look after rendering updates to your component & will re-render your component if a state property or prop changes<br>- reducer functions are pure functions<br>- reducer functions should not mutate the state passed in - it should create a new state with the changes & return that. This is critical, as unless you return a new state object, redux will detect changes to any affected components & will not re-render/ update them</span> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td class="email-content-main mobile-expand " style="padding: 0px; border-collapse: collapse; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-top: 0; border-bottom: 0; padding: 0 15px 0 16px; background-color: #ffffff" bgcolor="#ffffff">
<table id="actions-pattern" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 1px">
<tbody>
<tr>
<td id="actions-pattern-container" valign="middle" style="padding: 0px; border-collapse: collapse; padding: 10px 0 10px 24px; vertical-align: middle; padding-left: 0">
<table align="left" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tbody>
<tr>
<td class="actions-pattern-action-icon-container" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 0; vertical-align: middle"> <a href="https://issues.jboss.org/browse/AEROGEAR-8523#add-comment" target="_blank" title="Add Comment" style="color: #3b73af; text-decoration: none"> <img class="actions-pattern-action-icon-image" src="cid:jira-generated-image-static-comment-icon-7811eb48-4051-434d-808c-1015c63d229d" alt="Add Comment" title="Add Comment" height="16" width="16" border="0" style="vertical-align: middle"> </a> </td>
<td class="actions-pattern-action-text-container" style="padding: 0px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 4px; padding-left: 5px"> <a href="https://issues.jboss.org/browse/AEROGEAR-8523#add-comment" target="_blank" title="Add Comment" style="color: #3b73af; text-decoration: none">Add Comment</a> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<!-- there needs to be content in the cell for it to render in some clients -->
<tr>
<td class="email-content-rounded-bottom mobile-expand" style="padding: 0px; border-collapse: collapse; color: #ffffff; padding: 0 15px 0 16px; height: 5px; line-height: 5px; background-color: #ffffff; border-top: 0; border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; mso-line-height-rule: exactly" height="5" bgcolor="#ffffff"> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td id="footer-pattern" style="padding: 0px; border-collapse: collapse; padding: 12px 20px">
<table id="footer-pattern-container" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tbody>
<tr>
<td id="footer-pattern-text" class="mobile-resize-text" width="100%" style="padding: 0px; border-collapse: collapse; color: #999999; font-size: 12px; line-height: 18px; font-family: Arial, sans-serif; mso-line-height-rule: exactly; mso-text-raise: 2px"> This message was sent by Atlassian Jira <span id="footer-build-information">(v7.12.1#712002-<span title="609a50578ba6bc73dbf8b05dddd7c04a04b6807c" data-commit-id="609a50578ba6bc73dbf8b05dddd7c04a04b6807c}">sha1:609a505</span>)</span> </td>
<td id="footer-pattern-logo-desktop-container" valign="top" style="padding: 0px; border-collapse: collapse; padding-left: 20px; vertical-align: top">
<table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">
<tbody>
<tr>
<td id="footer-pattern-logo-desktop-padding" style="padding: 0px; border-collapse: collapse; padding-top: 3px"> <img id="footer-pattern-logo-desktop" src="https://issues.jboss.org/images/mail/atlassian-email-logo.png" alt="Atlassian logo" title="Atlassian logo" width="191" height="24" class="image_fix"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
</body>
</html>