<!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&amp;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">&nbsp;</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 &amp; 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 &amp; 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 &amp; 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 &amp; return that. This is critical, as unless you return a new state object, redux will detect changes to any affected components &amp; 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">&nbsp;</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>