diagrams/redux-form-overview.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="763px" height="264px" viewBox="-0.5 -0.5 763 264" content="&lt;mxfile host=&quot;www.draw.io&quot; modified=&quot;2019-10-07T09:17:46.287Z&quot; agent=&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36&quot; etag=&quot;XIHg5Ye3hpOQfzqsSqJc&quot; version=&quot;12.0.2&quot; type=&quot;github&quot; pages=&quot;1&quot;&gt;&lt;diagram id=&quot;pB0c6H4QM67pAn2SYfqh&quot; name=&quot;Page-1&quot;&gt;5VrLcqM4FP2WWXiZFAgweJk47kfV9HTPOFXds1RANuoWEiVEYvfXjwTCBkRiJgbbqWxs6UqAdO65L8HEmSebjxym8RcWITIBVrSZOHcTAGwXTOWfkmxLie/bpWDNcaQn7QVL/BtpoaWlOY5Q1pgoGCMCp01hyChFoWjIIOfsqTltxUjzqSlcI0OwDCExpd9xJGIttS1rP/AJ4XWsHx14eiCB1WQtyGIYsaeayFlMnDlnTJStZDNHRIFX4VJe9+GZ0d3COKKizwXWY+R9Ta2rvz+SiCxulvfzv/wrfZdHSHK9Yb1Ysa0Q4CynEVI3sSbO7VOMBVqmMFSjT1LnUhaLhMieLZsrTMicEcaLa50IomAVSnkmOPuFaiPTMEAPKzVSwVJczqjQHACu7OvVIS7Q5tlt2zswJQsRS5DgWzlFX+C5Gn9NQDD1yv5TTZ1TPSeuadKuKAg1hda7e+9Rlg0N9P8AHRigf6ZpLqRoQVCi9nWUDsZGNGgj6lsmolYXotZYiDoGondfvxgoyi2LFlQNWlJGUYvDWgQJXlPZDSVESMpvFYBYeokbPZDgKFKP6dRNU3ujqwe01OOa6nE7tAPGUo5rKKdsjkNyaxgU/deS3BsLRs8ADEUyVOku4yJma0YhWeylLebV4EMbLH5osWr/q9rXnupRudgf1TTV2Y/9REJsNdAwF0yK9s/9k7H0GX2UZlbFT7DTkNrAy/qR+2U5D9ELuOgEQ0C+RuKFebbVrXCOCBT4sbmQwbU3NYyA0XkM6fqN2YEDzm0H/hh2YBt28Bquu2NzPejJdfecVA8MqqecyXT9onnu+S1/H/TkuTMWz2dvx9+bnK9pyHaGtYEqLT/s8INzWkG1zJoZSHcvk0T+tgzBcc5tCLZZL81ZksrMvKNSeh85/tRqeSvHN5R00hzfNiuw42h+eQcJ9sxrYj7tMIzTHiTYZmn1D4ryjRQtBeNmavk+rMMO2tYBTE3NTmoeoxRvzaQVDBex7YEjdt8SDZy1RLPNGq2ypg+MJ/JPdcNLD+AyhDfZ73cceHYF8GA09o9SsvVPZf3LzWX7FnQlN89mGWZJ17KMm1BgRmVjzhGUoWccE6k5pqNMxLXahxo9TcQdzURGqfZef6px0vgA+lZ0Zy3ogFnQtYwggelSQIHu2bfxDjzGsoHeYWI0G6j28FINIVFJVTPMOdnechj+UoQ5hOUe+IPIciY1qFyZc3c1e+ns+jjwq61p8O2OWsLpwt4HY4FvFtkVu1cluyOGMmWkMVZ/ynkksKgAyPYPQ0+XXWgMZUOOHzTU6NodJSE45VkJ6KoIs5TRDD9I0AplqucWdxIxqqkXCij/2Er95MWkNCUSeGUN1xMwJUqhD3JgulatFjtSzh6LLzV2DOFVsmxBGilM1MN+5pl6z00RUiIZfxRWqlC1sJLnqWrR+hJGoBZBK3EcsQbgDrD862aibnccObuBd0oP7B32wIhGN+q7GmWiBGYZDpvKiGAW71ztgElC/yLymZcfNVS9DpOsZL2TCf2EbwyrY8idWr1WatlWVrlRfdVeX8aNnHZ8nrVuVAJh3KhQ/G7bR3DBfzfR2Hfdps4qrh2IxruoPbwhzgzw70uvKr0lpmt1fbbz4IySbel3i5HC0dY9bMSK5JTmKlb38KccZfg3fCgmKNBTxbFii97txLtTnlRG/0zr6bBjFaqsuM0kIeQC74sa42qog/DW62m34/U0GOioT3b3X+uVZrb/5tFZ/Ac=&lt;/diagram&gt;&lt;/mxfile&gt;" resource="https://www.draw.io/#Hserodriguez68%2Freact-cheatsheet-udemy-2019%2Fmaster%2Fdiagrams%2Fredux-form-overview.svg"><defs/><g><rect x="360" y="85" width="160" height="110" fill="#000000" stroke="#000000" transform="translate(2,3)" opacity="0.25"/><rect x="360" y="85" width="160" height="110" fill="#dae8fc" stroke="#6c8ebf" pointer-events="none"/><rect x="660" y="90" width="100" height="100" fill="#000000" stroke="#000000" transform="translate(2,3)" opacity="0.25"/><rect x="660" y="90" width="100" height="100" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(661.5,112.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="96" height="54" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 24px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 96px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;">Input Element</div></div></foreignObject><text x="48" y="39" fill="#000000" text-anchor="middle" font-size="24px" font-family="Helvetica">Input Element</text></switch></g><rect x="640" y="60" width="40" height="20" fill="none" stroke="none" transform="translate(2,3)" opacity="0.25"/><g transform="translate(631.5,56.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="56" height="26" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 24px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 57px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;">DOM</div></div></foreignObject><text x="28" y="25" fill="#000000" text-anchor="middle" font-size="24px" font-family="Helvetica">DOM</text></switch></g><rect x="560" y="90" width="100" height="50" fill="#000000" stroke="#000000" transform="translate(2,3)" opacity="0.25"/><rect x="560" y="90" width="100" height="50" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(585.5,103.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="48" height="22" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 48px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;">value</div></div></foreignObject><text x="24" y="21" fill="#000000" text-anchor="middle" font-size="20px" font-family="Helvetica">value</text></switch></g><path d="M 560 165 L 498.24 165" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path d="M 492.24 165 L 500.24 161 L 498.24 165 L 500.24 169 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><rect x="560" y="140" width="100" height="50" fill="#000000" stroke="#000000" transform="translate(2,3)" opacity="0.25"/><rect x="560" y="140" width="100" height="50" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(563.5,153.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="92" height="22" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 94px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;">onChange</div></div></foreignObject><text x="46" y="21" fill="#000000" text-anchor="middle" font-size="20px" font-family="Helvetica">onChange</text></switch></g><path d="M 490 115 L 551.76 115" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path d="M 557.76 115 L 549.76 119 L 551.76 115 L 549.76 111 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><rect x="390" y="100" width="100" height="30" fill="#000000" stroke="#000000" transform="translate(2,3)" opacity="0.25"/><rect x="390" y="100" width="100" height="30" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(414.5,103.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="50" height="22" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 52px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;">props</div></div></foreignObject><text x="25" y="21" fill="#000000" text-anchor="middle" font-size="20px" font-family="Helvetica">props</text></switch></g><path d="M 390 165 L 328.24 165" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path d="M 322.24 165 L 330.24 161 L 328.24 165 L 330.24 169 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><rect x="390" y="150" width="100" height="30" fill="#000000" stroke="#000000" transform="translate(2,3)" opacity="0.25"/><rect x="390" y="150" width="100" height="30" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(406.5,153.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="66" height="22" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 68px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;">handler</div></div></foreignObject><text x="33" y="21" fill="#000000" text-anchor="middle" font-size="20px" font-family="Helvetica">handler</text></switch></g><rect x="420" y="57" width="40" height="20" fill="none" stroke="none" transform="translate(2,3)" opacity="0.25"/><g transform="translate(377.5,53.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="125" height="26" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 24px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 125px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;">Component</div></div></foreignObject><text x="63" y="25" fill="#000000" text-anchor="middle" font-size="24px" font-family="Helvetica">Component</text></switch></g><rect x="15" y="80" width="160" height="110" fill="#000000" stroke="#000000" transform="translate(2,3)" opacity="0.25"/><rect x="15" y="80" width="160" height="110" fill="#dae8fc" stroke="#6c8ebf" pointer-events="none"/><rect x="0" y="52" width="190" height="20" fill="none" stroke="none" transform="translate(2,3)" opacity="0.25"/><g transform="translate(27.5,48.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="134" height="26" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 24px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 134px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;">Redux Store</div></div></foreignObject><text x="67" y="25" fill="#000000" text-anchor="middle" font-size="24px" font-family="Helvetica">Redux Store</text></switch></g><path d="M 145 115 L 211.76 115" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path d="M 217.76 115 L 209.76 119 L 211.76 115 L 209.76 111 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><rect x="45" y="95" width="100" height="80" fill="#000000" stroke="#000000" transform="translate(2,3)" opacity="0.25"/><rect x="45" y="95" width="100" height="80" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(46.5,99.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="96" height="70" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 20px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 96px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;">Redux Form Reducer</div></div></foreignObject><text x="48" y="45" fill="#000000" text-anchor="middle" font-size="20px" font-family="Helvetica">Redux Form Reducer</text></switch></g><path d="M 220 165 L 183 165 L 183 155 L 153.24 155" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path d="M 147.24 155 L 155.24 151 L 153.24 155 L 155.24 159 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><rect x="220" y="145" width="100" height="40" fill="#000000" stroke="#000000" transform="translate(2,3)" opacity="0.25"/><rect x="220" y="145" width="100" height="40" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(221.5,152.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="96" height="24" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 96px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;">Redux Form Action Creator</div></div></foreignObject><text x="48" y="18" fill="#000000" text-anchor="middle" font-size="11px" font-family="Helvetica">Redux Form Action Creator</text></switch></g><path d="M 320 115 L 381.76 115" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path d="M 387.76 115 L 379.76 119 L 381.76 115 L 379.76 111 Z" fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><rect x="220" y="95" width="100" height="40" fill="#000000" stroke="#000000" transform="translate(2,3)" opacity="0.25"/><rect x="220" y="95" width="100" height="40" fill="#ffffff" stroke="#000000" pointer-events="none"/><g transform="translate(221.5,102.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="96" height="24" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 96px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;">Redux Form mapStateToProps</div></div></foreignObject><text x="48" y="18" fill="#000000" text-anchor="middle" font-size="11px" font-family="Helvetica">Redux Form mapStateToProps</text></switch></g><path d="M 272 -20 L 264.5 -20 Q 257 -20 257 -10 L 257 206 Q 257 216 249.5 216 L 245.75 216 Q 242 216 249.5 216 L 253.25 216 Q 257 216 257 226 L 257 442 Q 257 452 264.5 452 L 272 452" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" transform="translate(2,3)rotate(-90,257,216)" opacity="0.25"/><path d="M 272 -20 L 264.5 -20 Q 257 -20 257 -10 L 257 206 Q 257 216 249.5 216 L 245.75 216 Q 242 216 249.5 216 L 253.25 216 Q 257 216 257 226 L 257 442 Q 257 452 264.5 452 L 272 452" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" transform="rotate(-90,257,216)" pointer-events="none"/><rect x="198" y="230" width="120" height="30" fill="none" stroke="none" transform="translate(2,3)" opacity="0.25"/><g transform="translate(198.5,232.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="118" height="24" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 118px; white-space: nowrap; overflow-wrap: normal; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;">Redux form does this automatically!</div></div></foreignObject><text x="59" y="18" fill="#000000" text-anchor="middle" font-size="11px" font-family="Helvetica">Redux form does this automatically!</text></switch></g><g transform="translate(29.5,6.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="392" height="26" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 393px; white-space: nowrap; overflow-wrap: normal; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;">Responsible for all the form data of our application.<br />Redux form provides this reducer and we just need to wire it up in our app</div></div></foreignObject><text x="196" y="19" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">Responsible for all the form data of our application.&lt;br&gt;Redux form provides this reducer and we just need to wire it up in our app</text></switch></g><path d="M 145 102.14 L 234.24 43.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/><path d="M 238.63 40.61 L 234.7 47.38 L 234.24 43.5 L 230.86 41.53 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 594 136 L 586.5 136 Q 579 136 579 146 L 579 206 Q 579 216 571.5 216 L 567.75 216 Q 564 216 571.5 216 L 575.25 216 Q 579 216 579 226 L 579 286 Q 579 296 586.5 296 L 594 296" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" transform="translate(2,3)rotate(-90,579,216)" opacity="0.25"/><path d="M 594 136 L 586.5 136 Q 579 136 579 146 L 579 206 Q 579 216 571.5 216 L 567.75 216 Q 564 216 571.5 216 L 575.25 216 Q 579 216 579 226 L 579 286 Q 579 296 586.5 296 L 594 296" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" transform="rotate(-90,579,216)" pointer-events="none"/><g transform="translate(461.5,242.5)"><switch><foreignObject style="overflow:visible;" pointer-events="all" width="274" height="12" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; white-space: nowrap; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">This wiring is the only thing we need to do manually</div></div></foreignObject><text x="137" y="12" fill="#000000" text-anchor="middle" font-size="12px" font-family="Helvetica">This wiring is the only thing we need to do manually</text></switch></g></g></svg>