Using the Reducer in a React Component
Learn how to use a reducer to add actions to the application components.
We'll cover the following...
Adding a Counter
component
So far, we’ve talked much about the reducer pattern outside any framework. Let’s pull our counterReducer
into React and see how it works. We’ll start with this simple component:
iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAAXNSR0IArs4c 6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAAB AAEAAKACAAQAAAABAAAAwKADAAQAAAABAAAAwAAAAABNOznKAAAj70lEQVR4 Ae2dCbQUxfX/u+chKqJxjQkCvkhcEfcl0cSgqEFxjUZN/uavOQlJDDG/5ASj SdS4xS1GThLjromKP1BQFMQtRJGAu3HFBdlVEBVQIyDwuuv3+b7zxvPeTPW8 npmerafuOff0TPVWdeve6lu3bt3reQ4cBRwFHAUcBRwFHAUcBRwFHAUcBRwF HAUcBRwFHAUcBdJPAT/9TaxoC0W/9cANwV7g+mArOAjcGtwE3AbcCdQ1pcJ/ ufEVcB64HJwLvgy+Da4AV4G6ZjVoQAcxKeAEICahOl3Wwm8x9ABwB1AMvj3Y rwN7cKwWrOFFC8B3wNfA+eCr4BzwddAJA0QoBE4AClGn67md+XsMeBjYH+wN alSXQNQLtFERfQk+AeeDD4ATwZmgA0eB2BTQwLAxqJH95+ALYAhqRG00VL2f B0eCO4JSyzKgAyjgvgD5bCD1Zgh4IDgYFMOkBT6iIdPBaeAj4IvgWtCBo0D7 pPVG6LAA1KSy0Ub6YuqrucMicAL4dbBpodm/ALLgbAtKzfk+WLI+36NHD693 797eeuutJzS9evXS0R80aFDbNtts8+nmm2+uOUNJsHjx4o9fe+21Dd58882W 1atXm1WrVvmffvqpt3LlSgP6YSgtpyx4jLsvB58GPyjrSQ12c7MKgBh9H/AU 8EiwD1gU+L7vffGLXwy32267zC677BJuvfXW/pe//GVvyy239Pr06WNAr6Wl JXFdG8YP3nrrrQxC4XE0CxYs8F955RVv7ty53htvvOF/+OGHRbWj08Ur+T0D vAO8D1wCph6aUQA+R69eCB4PfrHYHu7fv3941FFH+ccee2zQ2trasuGGG/ob b7yxWWeddWpCS2OM98knn3grVqzwYH7zwgsvmLvvvjucPHlyD74OxTZP1+sm WY3+AN4LOkgJBTaiHRrtF4Cx9WXUGjNgwAAzfPjwYMqUKcHatWtDmK7u4aOP Pgpuv/324LDDDlvbr18/s+6668Zucyf66EugL2VPMJVQk1GrBpTcnXf+EtSo v36c94tpvvnNb5rBgwf7oNQatJ7GI1cQBN6sWbPMo48+aqZNm+Y/9thj/rvv vhuHBNlrtNo8BrwWnJstdMfGocBPqao6MQC7HQUZ8cOLLroohGlCVIiGGO3j fo74KhjmC+bss88OP/e5z3VLi070Eu2kFp0IVnOlm9c5KJUC0u+vArP+MZEd nslkDPp8+Otf/zpcvnx5W1yGauTrli1bFowcOTJg4h727NkzkjbQr/M5CcKV oIwGjfc5pNLNAgfR0IdA2Qc7d2De7y996UvhWWedFb744ottmBMbmadLqvuc OXPCyy67zGCuDTUQdEevjvMylx4FrgM6qCMKyLz5/8CFYLedefzxx7e99NJL 4Zo1a0pinrTc1NbWZhYuXBief/75gdYwYtBOA8tS8DeggzqhgCa3PwY/BiM7 Edu8wXYfjhs3bm1aGDjJdsybN6/tiCOOCDfYYINIGubQdzz/+4JOJYIItYLN ePFloJb4IztOo9tpp50WzJw5E22n+dSduILCZDm85ZZbwn322adbFRJ6ywN1 Krg36KAGFJCLQbeTXcyY4V133bUmbZaduExdynWsMocjRowIY6whSFBkadPc y0EVKSB//FFg5Kivid0ee+wRPvPMM0EpTNDs97COYG699da1W221VZxJ8jL6 4mTQmUohQqVhC16gxZlI5pfKc+qpp8pfxjF/mZKMlSz41re+FcQwmS6mT0ZU uvOb/fm9IIDs0ZE6P5/t8JxzzgnkH+OgfApozsTaQcgimnT+yEGn49wnHM8G HVSAAvJLOQOMXNnFQc1g0gsx77mRv3zez3vCbbfdFnz+8583uIYUEgQJwc9B t1YAEZIC2fl/BkaOQrgjm2uuuSav01xBchTAIdBMnDgx3HHHHbuzEsml+gdJ db57jucdBxHeA60jj0b+a6+9tukXtpJj9egnafGMTToBm30iB6OOfvqIo3yI HJRJgR25Xw5ZVuZff/31zahRo5xxP5pnK3Jm/vz5q7/61a92ZyHSxPgAMAM6 KIECWui6H7QyPyN/eMkllzSlL09FuLrIh8rDFJdxa9906rOn+L0d6KBICmiJ /RrQqm+yF9fIq9EtcBXJtQlfvmjRIrPrrrta+4i+k3DIaDEFdJNiiBAX9Mk8 GZQeaR1hDjrooFDmuYT70z2uBArMnj179c477xx0Yx26kb5UMAIHMSjQl2v0 6bQy/2677RaigzrmL4FZK3GL1gr+9a9/BQQIKPQl0GD2fVAWPQfdUOBqzlvt /SzNG9wbHPNXgpPLeKasQ2zID+R1S99FoeKWtoIOClBgGOesBJRz1hVXXKGF rjK6yt1aSQrccMMNgSxzUX1I+f+C64I1hXr9DEn1uR7UtsY8OPzww815553n 47Oed84V1AcF2HPhv//++wYfoqjAXYOoqcyjz9RHjeunFhLKs0Grn89mm20W vv322071qeTwndCzCdwVDhw4sNBXYC79vHstWa8eFya+BEG+C+aZy1B9vKuu uipE/5dp1EGdU6Bv374+qlDIOk1UTVs5IVeJmlmF6lEFOguCHA12AcXkISKb 96tf/SqDm3OXc+5P/VKA+Eq+3NKJS+QrRlEOaCDTgDcNfCvnXFP+3ZlWrwDz PpsElzUPP/yw28qYkHpSzccsXbo0ZJ9xm61fO8qmcKwJ1JMKJJVHur98/fNg 6NCh5uCDD+ZD4LSfPOLUecGmm27q/+QnP8lwjKrpEE58K+pkJcvrSQXan4ae CeaZduR7Pnr0aE+ErCQx3LMrRwFFzya8e0jw3qg+bOXt94AKzls1qJcvgOzB x4Cb21r+u9/9zuB2G0U42y2urM4oIAPGpZde2h5JO6JqAyk/NOJcxYrrRQBk 7x8G5tUHBytz3HHH5ZVXjCLuwRWjAJuV/Isvvlh5E2zvUHQPGT82sp2sVFm9 MJYkP89VVllXjj76aA8VqFLtd8+tMgXoTx8fLhk5bHAQhQNsJypVVg8CINVG k988FWeLLbbwjjzySI/kE5Vqv3tulSmgDDqEpIzqU6nACm1ZNagHAdDsv5+t xfvuu2+w11575QmG7VpX1hgUkPozbNgwpZeK+gr8kJZIHaoK1FoApAx+39ZS Alp5RG12zG8jToOX4R7hDxkyJEoAlMLqO9VqYq0ZbA8aOgnsk9tg7P7Kc4Uc 1FpGc2uW7H+S2wXjx4/3CUrry07+ta99zbDJJyOrSS2BFUdPucaef/555R7L bL/99gF9kpGTWxL1ev311wOiSlhnwzx/BjgY1OJZakGEPB38FOyy8itf8nvu uSe1MX0UblBxN5V3zLZ7iqyTwfTp00OlRK026J333Xefsl/mbWrBpSFk+2kb KZYSqdaBBx5o3esBP7wD1tRJjvdXHKTnjQa7ML/+77DDDqHi1SdC5Tp8yH/+ 859w//33LxhJAa9Xc/XVV4fkBK5aCxDMEFt9m95t65dsmdQXbYQvF8aMGRMl AFoMGw6mGlpp3Twwj9gKYU4+3FQKAD7y7QGlbCN/Li2Uxws1pGpfwssvv9zI cS23Hrn/FXD40EMPDZcsWVKWDMxnO6tSNOU+v+O/4r6m2utRtv88YpNhPbz5 5pur1ull9WCRNxO5whxzzDFRHZ5HC9Fnk002CaQuFfmqoi+XyqWoerY+iSoj p9pqqXOlAvnYCtFjOu/dEkwtaL9vHsFxnw0VcaxUotbzfXfccUe40UYb5bXZ RofOZQiNIRl2xYRACTFOOukk63ykcz1yfytSNIJTcl9JeP7whz+EEfuHl/K+ bcHUwge0LI8ZsP0bxZ5MG2i0I7x4GEf1yaULX4Fw0qRJJTNad7ScMWPG2m72 7+b1U7aOmsugrnb3isjzTLgDtS/7vJzjIfyvKNTKxrgLrVK0tzw45ZRTArlA pA2ImRPef//9PpxQdNMQHv+BBx7wsdAUfW+cG9hll2GyHefSvGswZ/ok4C6+ UR1Pwrzqs2MsyrR6bN4LEy6olQDI8S0P5OuPDTyvPA0FY8eO9RgpS24KTOYx gS75/qgbtW93woQJJfMBwulNnTpVX+2oVxQsJ02t3zH3sF2X5x9mu6icspIb Xs5Ludf6aYMYZtttt41aHCnzlbW9nTRDUaNcrIpppCX8YOILQyw2liWYWjB7 +umnvY8//rikr4BcI3B3ibp3r1jEKeOiWgjAJtS3r63OhxxyiGzjtlMNXab0 QozeZQkAMZA87OaJDw6M/lHMF5vmCn3CanHs63MvJEl3blH2v9wiIreRZS8q 51gLblOYc6vPN+pP2Z1RDjEqdS/hAsti/my9nn32WU0WEwOlj8IFo2yhYs+v r9XhUis2YMCAQrduX+hkuedqIQDbUOkNciuO/d9jJCi7M3KfWw//tfKbRD3Y Ttii+JtJPEvPYIuih3m17MdJDXryySdLFnIsf4oBFQU7RZ1IorwWAtBKxfM2 vrMiaLCRl0zEJIhRoWeYWbNmJWLWErMSCTsxAdAXYM2aNYk8DytXyeRjxbvQ im+hcyW/M3tjtQVALo5fAPPeK//wDlt0tm6pOKK7+ytWKNJLMoDVpjRzi+X1 TFx91c9yqugi1KCyNrPjfxT1znWiTiRRnseISTy0wDOk+rTazhM1wEgNShsw wq6FyRJRgUQbvgKJMcQHH3zQJp+rJGjOanJZ6mtra2te1KyOelXUHaLaAqDO 29hG8D59+ijiWyKjke35tSpDAD5NUgDQtxPrM+qlFdpESEO9ylLzWPyMWuWr 6IbwxIgZk4rrc13e5heFO1fsn5jPaKjLEOpe7Gkua3Ts3GDMxFEjZefLYv1G 5cxgh09k0GERsyzVjPuj1jhSNQeQjtM/t3d69+7tEfcntzgV/xnZ4LFkmEwE ISR81EhZNL3Qu1sYfBIRgAQGsKgBMLHBw0agan8B9JnMa5AYRKORrYKNXoYA GJg2qnOLap5cRVgt11c0EZDrObRPpG5s52zICVy1mW5rW8/JrZbgt4lMxmzP r3GZT+K4RNrGl9Jok0xS7YFptfc4kS8AZuzEVLOk2hfnOdUWgB1slUIAvI5t eLbTDV+25557JsJk++yzj1xFEuszNqUrdn/ZAqUv0957751IG6vd2YkRM2bF 5QeUB0wSfRbBql2XvHpUqoBID9oHUPbjEYBEaYQK1IIQlF0vreHg0Zlo3cqu VMwHVLvSVv1VeihCkIiaELPdVb2M+KYtHXtfS34v9NH2wbJH69wKHHvssWU/ c4899tDWzbKfk1u3avyvCwGQCwRCkDc5rgYBqvQO/4QTTiiLQZhHeKQcSry/ EKqoYLWxSKNu05eJuUn5n7hYb0z2osQJ2k31rJYCfQGSUBG6eXdNT3/3u9/N IOgl1UFqv0KRECu1LCGyvVyq5w9/+MOSJ7AYL7SJySQ4NbFVs2Jl1RYA66IG zJ9a9Sfbc2z290jvWtJcQExGfjRfc6Xs85I8IgB+qcKlPdxM8pOsTlWfVW0B iFJzEh/ZqkrFGC/DhOl/5zvf8Tbe2OoJUvAJisHzla98pSLMrxfvtNNOGUXh LhZkvSPev2IJVaxuxdap2OurLQBR70u9AEjFg8l8Jp1FfQX69+9v/vSnP2n0 L7ZvY18vJ8QRI0ZokS12P4j5SVYeEOg2qk9jv7+WFzZ05WtJuFLejRD4l112 mY8gxJrzyEOWPLvyk6r4CIslxydGj+YZ3TZNE1+FeCHxXdQXvdtnNOsFE2i4 RpkuiJ18TWTgmBSeUKZ7MqUUjBGkhcFx48YF1YyRpEBVhG4JETjNybr0Uef/ ZOsM2JcQaHdaUoCKp03FtneOpTw14ASgg2O0s+uXv/xlwOS43VeIj4OR3xAj cDh48GDD9sfkuKsILhVTP/LIIwGT21BCqPUHuE91DKUikbCQSxLk/I661UoA yvLhTo1Y1qAhLBx5V155ZebHP/6xUViReeQHkC6OTd3gVuDhHFhxtcfWbM1V CFueYSN/+Pjjj3tEgVbIE1/Mv99++/nK1qlr0gJOAGrck4qMBnauRV3Myxjx M4Sp8YQdUBf1ylYmqWMqG5UUcdxz0k8BJwDp72PXwgIUcAJQgDjuVPop4AQg /X3sWliAAk4AChDHnUo/BZwApL+PXQsLUMAJQAHiuFPpp4ATgPT3sWthAQo4 AShAHHcq/RRwApD+PnYtLEABJwAFiONOpZ8CTgDS38eN3sLeNKBi3nfOGa7R 2SP99R9KE58AHwHHgx+DykWglJtC5XeVy3ZJ4ASgJLK5m6pIAe0627cDz+K4 DJwPLgHfBd8BFTB4DvgeqHRLyierROwSloJRq50AQKEo0L6Pe+65x2PTt0J/ +Do6qCkFpAoplUxuOhl9AZTsTF8E7WaTQEgQdFwMTgFvBvMSLbs5AFTJBTYp ec8//7xHMCr/uOOO84cNG+bvvvvuHjulQjKqlPy5zX2P+58YBSQYG4La0KyM Mv3BL4MDwYPBS8G54O/ALpuenQBAkVwg3Y930UUXeSSn/uyUfhNFLaMtgeze ckLwGWUa5ocm0xeAN4JbZ2vtBCBLiU5H7dedMWOG9uR2KvW8//73v95f//rX FjaF+//4xz/at8Z2ucD9qXcKiN+PAm8B23OPOQGwdBlhP3wFsrKc8ojS4M2d O9cbPnx4RsFqyQFsVq4sK0Gi7TWurIMC7J3+gNhDwRe+8AVPuREIHJAEbfbj IcPBZJ6WRI3q6RmKjaOgsYz2HknurFUjwZw3adKkzBNPPGGIkWO+/e1vmwMO OCCjgFEOkqMA0fQMsZQyM2fO9BYtWhQy+GTef/99895773lkp/fJmunzey3n 1tEXOiYoytip4OhExCnmSxvmMkVnQNf3GNnDa665puBXklSj/o033ujdfffd nvIAnHPOOb6CTDVMY+u8ovRFD32NCdOimrYH4kL39DBGCJXnWINUi77C+jqT /HvlnDlz1lPi7gULFngTJ070KbP1xzY87/hqN7/h4gKNHTu2TbH9iX6sCUG3 SBwdBb0Kpk+fHjIyGQWbctA9BaLiAo0cOXJZ93fbr9Ak7brrrluLEEX124MF R7dqS0c9vg/VpkWj+2mnnRYrPxejkH/vvfdmtG5w0kknGWL/KO6PoS+6zqjr sbEpq5MCGA0dOrSFSHdRLdvbCUAUaTrKFfd+0KBB/h//+Ef/n//8p6eobXFi 4WvuwLqBjyrl80Xwv/GNb3ijR49uQ2ctORZ/N1V1py0UILS8UR5qyykVpTM1 aURjyyomUlt7IriHHnrI/9vf/hYor7HKugMJApM1D5XI/973vteDCXaGY3Df ffeF8+fP95YvX26kxzpIngIoRt7UqVM9Js1RD//QTYKjSBNRLiuPoiIzqpu7 7rrLY47gYwnyNDGLA5q48SVouf322z1Ff8bEZ5SobrfddjMIVWaHHXYIySGQ SVP4wTh0qcQ1K1as8Agw7DPI2CbBeuXTTgBKpDyZEf2f/vSnHnMEj0Wz4Nxz z/Ux1cVWKTU68QXwhZMnT/awdLSj8qVttdVWZv/99w8JmdhCPM7VCMq6Cknu oDgKyDKE2dQXrSNgnBOACMrEKdZcgPSgipXfQvojM2HChPDPf/6zjwlOo07s r4LeJXs22G7bnjVrlvfoo49mOb6d+fVlYAXa/OAHP/D4UrQQuzNOFZv6GjF+ AfVyHsSZEXvEampKxmi80gSxaJNB5/RRb8wZZ5wREOU5TCKzC6ZUT18XhKvl 61//egumwfDNN9+MHNZiVLcpLnn11Vej6CQX6TtBuVNXFRpuHYBRpCTAHBou Xrw4nDJlSoCqFHRkZBfTlo3KqrntttsaOritpMrV4U1JrwNA/2CXXXaRxc1G b7lIf1Wc774AokIFAJ8VH/8Vn/SmGaxGGS2K3XHHHSEuFuGAAQPMpptuWnJ+ Xn0R+AJ4uGq3yJLkoCsFVq9e7f3sZz/zX3rppSj+fos7ntNdbg7QlXYV+ycV iWTZQpnlwmeeecZ7+eWXvddee83I1ZrR3MeXJcpaYa2XlvvxVwrJ7aXNOkXd a31gCgql82OZM7LOFWiONse0O3k5AShApUqd0loAk2bvsMMO81atWtXuZi1/ lXfeeSdg8usjDN5TTz0l568M2kpkNeT7cuutt/qYZaUSFerwyGek7QQGBPP7 3//e056OCHiU8luy55wAZClRg6Ns/fiptKdGkjVJZk9cKD6rCZ/ygC9E+OCD D7aw/0BqTyZ3vUHOeGzb1KT7s/ua9Idho1KIRS6DE1zUYKD9xL8CV2VpFKUj Zc+7Yw0pwBJ+Cwtk65x55pkZfda1cGarzgMPPGAtt12bxjJ9JZ999tng+OOP 9954440o5pfl53rwtc40cALQmRp1+ltfil133bXllFNOsfoRsRDX1P0I05sf /ehHGTJrZtdObD05j8JrQG2c/wycCvQZKer7h4SAuYO1v/A3ihr16rtRZdZO 8yfWXQy+VWbp0qWFBgFt2fsFuDD3lVaC5l7k/tcHBRYuXKgvQN4opw08zQbS 9zEvezfccENGaVwLtF8j/kXgA7ZrnADYqFKHZXS4YhRZRzl2olkFow6bUXaV MAxok4s/atQoWc18WcIKgOZGWvH9W9Q1TgCiKFNH5VrYYWumwe5vFQAltq6j 6iZaFaxcWlE3mDVl7QoZ8dsd3GK+5AmuUywgRYizghMAK1nqq/Dhhx8O//73 v2e0ApwLeKV6Rx55ZCEVIPeWhvo/fvz49V988UWDOdjHlTyuoGvknwz+HHy7 UIOdABSiTh2c0zoAFg6fkTCvNvJGxR3C4FqRWgHAQ7aXovQVARolxoBngou6 u88JQHcUqtF52bbx8zEnnnhiu4u0rRps1jcjRowwzg2inToa9bX16+/gheAK sFtwAtAtiWpzAWY9g9uzPD6tn325WZ933nke+wSs52tT65q9dRVvngheC04F Y4MTgNikqt6F2PW1sOOxb9iq96smv/nNbxSMK7WqT0xqK/rzJHAU+AoYOzIW 17aDE4AsJergKLUHP5aAXV8+ESWsI7v0fpzozOmnn+4nFCawDloeqwpazJJa o6PyANwF3g2+CZYMTgBKJl3yN7K5PmRkzyiCRNTT2UAfErnaJ9xH1CVpK59J g8aBb4NzOo7zOOabxCgsFpwAFEuxClwvD8/rr7/enH/++f6SJUsiN3HjMWrY bhmy06mZ+k2qzfkVIHv7I5uJkJWiYcnP1eYNrfAS/NW77bbbfMUQsoH8gLSL jB1lBqc412c2IpVY5ohZIuHKuS1r4iQ+kKcN9HgzWvX97Dtg/vDqq6/2Yf6C 12Wvd8f4FHACEJ9WiVyJeTO84oorPFY4M9rPy1cgUt/XC9kkY+68886QdE09 4oRkTKSSTfQQJwAV7Gzp9or1g7eiIWR3eNNNN2WIJpeJk1BDdn58fAwuEKZP nz6unyrUT46wZRBWqgyoFcj2IFg4bK3FZbmnRnn28/qK3KAgV0Qn0Mb3PDfm qFcrhIqizhHZwIP5ndoTRagEyp0AlEjEMWPGhDfffLMvRtcjJAd4bfaQ5ybo s1nD10jfIR8F1ZzOVUDVUXQ5j5CIGVwcOp9yvytAAScARRJVHpmYK82FF15o G5mzZbEZXq+Xbs9uL8OeVqMMM5g7i7q/yCbU6+VRbY4XdbjEVjkBKJJwUmmI 0BDVWUU+zfNwZzZ4dHpKpqFRXybPZgRMwOtGtFuRHCoGTgCKJK2Ss0nNKRfQ 7dv9fdjPKiHwyTXQnJzfQUjmS1ECMLtcWhe6v9oCoOx8eZBEANm8h1aoAMZV uk5PglAMEPbcEPff32677bSJW/FrlIo1qzIV86jUXUsc/4CoeFFGAnl6Vgyq LQBb2lqCX3vDjH7U1SMIlfntb39r3aSi9kmg0ekD4vhkWltbFc68PQEGC1n6 7RPcNqqzbeRJfRmOf4XaKFeIikE1BUBMvqOtJYT1sxXXZZl09FNPPdUnmrE2 qRt8d9pHcW1NxDd/db9+/QJG9l6oNBmpNYrjL2Si2zBCXm3CK/daBCh3VHsQ 24jzZRdXUwC2oLbWrA6MlA01ImqEV+I8YU4PdNZjc8/lXOr+igKYi02nZCC5 RHmagi6BrHIvKPd/NXXQo22VlQnwkEMOqaipy/ZeV1YfFHjyyScNSQTbFxMt NZK/f0WhmgJwlK0ljKLhJpts0lBfAFs7XFnxFJCryOOPPx6VxE6T30jdqPi3 2e+olgD05fUDbVUgpIet2JU1AQUU6YKQL54t3AvNfwpcXGkyVEsABtMQzQG6 AEv9RkmkuxS6P01Dgeeeey5UHgQLaLfX4+CHlnOJFlVjEtybGh8M6tgF9txz Tx+rSZcy96d5KHDJJZe0+01ZWqzV3yngWsu5RIuq8QWQ+nNQbq1lCicZRLjZ ZpvlnnL/m4AC06ZN8/79739H8d8bkGBGNcgQVYEk3/09HpY3zJMkzpD31muy yAZJ0rVhn7Vs2TJDTKNClr/LaZx9f2jCra60AGj0P91WZ9Qfb9999630+22v dmU1poAy2pAkMGruN53qPVitKlaSAeX3cwG4YW5jpP784he/CEkBlHvK/U85 Bdgs1B4AgJ1yNgGQl+HFYMV1/yyZKykAX+MlR2Rf1Pl46KGHhmAl3935de53 HVGAaHeGrC425lctNfG1moXqqAmxqqJR/xZQep5W+T5DtvuFrP6lJsO5tkQ6 iEcB/KYCbfzpzA+dfiuG/8lglHBwKnmo1Ci8H1U9AezSGLk9EO3YsPpbqfcm TyH3xEQoQGz/9uztJAmPet4LnBgPRrlFRN1XVnklGLEPNfozmLehVSbPk08+ WXlxuwhGWS1wN9c9Bfg+eJMmTQpZ9Y3q909oxBlgRR3fbIRKWgDUwEvA7W0v Y/RvY9tfFBFst7iyFFAA1cdceeWVCg8T1Zq/cKLhdX8Jk3Q45ajP0/PYCKI8 T2E8bdFdlRYKEPjLXHDBBXlzwU48ovQvW4END9vQgmfBPOZnK2DI7N8xf1q4 uoh23HvvvYF8vmx8QZni+Q8HU+ENPIGG5Ek6O6i0+Ttk32cRZHOXpoECBP4N Bg4cmMcT8ElWIO7ndy+woUELXmeC2UZ1ObLdMXzllVfc6J8Gji6iDez0Cols F2D568IPnfhkKb8HgA0N0vu10+sDMK+hrPSasWPHOuYvgnHScum4cePapPra +IIyWX3+P9jwICe3F0FrQ3F4CjQJctBcFCDGT0gGGytPwCsaKMeAG4ENDVrt fQjMG/ml9w8ZMqSN2Dlu9G8u3jfy9CSqdWDji46y2Rz3AOsCSl0H2JjaXwoe amtF37595e6qPFbO5m8jUErLtNr7l7/8xZDrLIqv2mj6BeB/GpkEPan8uaBW 7ayjv/Q/p/o02dBPc6dMmWKImpfHE534RJ6eMpo0LGhEPwzUXs28hvbs2dOc e+65Tu1pPt43hIk3fPmjVB/NBx4DrZEBKW8YOJaavgvmMT87u9pjXi5fvrwJ u7+5m4yrQzh06NBCk94l8IzU5YZWibWxfYGN+VW21157hWRHcaN/k8kCkbKV 0yAkWl7eoNiJV/6H39UIwMBrKgM78djnQGsjCW1oZs+e7Zi/yZhfzX3ssccC AptZ+QJ+0aR3LNjQsCO1/zdobSThvttmzJgRNGHfN32TyXsWEC3byhcd/KL9 vXkBEShrGNBStQKUWhup3T2TJ092i11NKApa48G1vZDe/x5809B6vyR3chTz K5MhqYLcyN+EzI+hIxwxYkSbDB8R/KGQJjKVNyz0p+b3gdYGksTNXHvttU7n b0LmJ0daQH4ERfQoNPrfCO807KS3lcrPiGJ+bWq/7rrrApKaNWH3N2+T6e9w 9OjRAUlAQrm6RPEH5Y+CfcGGhK2ptXy0rQ3EtcFcddVVbuRvEjkgarORro+l Z+3hhx/eHeOLZxaBWihtGOj8mRpErUeBQ2y1HzBgQEACZ3/YsGFRfh6221xZ g1FAMfuVsOLll182it0P8yuMTYuSf3fTFG2FPRuUg2TDQLZRe1Hjm8BdImq+ +oADDlhEZsN+LHh0FpqIy11xI1IAd4ZPidywnqK3sX/bMNn1JRAxQJtbfgRO BGX7byhopbZPgla1x5U7uhTgAUmHIjlrU1R2MOVnY4HUHsf8jgbF8oBG/RtA qc4NC5JaBWvZsGFb4CpeCwo8zkvPBZ8AV9aiAkm90+nzSVEy3c+RqqOsLa+C V4HjwFSABOA6cGQqWuMakTQFZNl5CpQ7zNSO359wTA1IBeoP3gp+IzWtcg0p lQLa5TcVfB2cBs4EpetrA5Q2uzhwFHAUcBRwFHAUcBRwFHAUcBRwFHAUcBRw FHAUcBRwFHAUaEAK/B/QbSVwblTzEAAAAABJRU5ErkJggg==
Adding a simple counter component
We can see that there isn’t much happening just yet. The counterReducer
that we’ve been working on is ready for action. We just need to hook it up to the component using the useReducer
hook.
In the code above, we define a functional Counter
component using arrow function ...