A Deep Dive into React Hooks/

...

/

Working Example of Notify Hook

Working Example of Notify Hook

Here is a fully functional React application that uses the Notify hook built in the previous lesson.

We'll cover the following...

See the Notify Hook in action

The following example demonstrates a fully functional usage of the Notify hook.

Run the application. By clicking on the Save button, it will show a notification message upon the completion of the API request.

Later in the course, various components that make up this application are discussed.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   viewBox="0 0 48 48"
   version="1.1"
   id="svg15"
   sodipodi:docname="cross red circle.svg"
   inkscape:version="0.92.3 (2405546, 2018-03-11)">
  <metadata
     id="metadata19">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="1027"
     id="namedview17"
     showgrid="false"
     inkscape:zoom="4.9166667"
     inkscape:cx="-11.694915"
     inkscape:cy="40.271186"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="g13" />
  <defs
     id="defs7">
    <linearGradient
       id="linearGradient828"
       osb:paint="solid">
      <stop
         style="stop-color:#ff0000;stop-opacity:1;"
         offset="0"
         id="stop826" />
    </linearGradient>
    <linearGradient
       id="0"
       gradientUnits="userSpaceOnUse"
       y1="47.37"
       x2="0"
       y2="-1.429">
      <stop
         stop-color="#c52828"
         id="stop2" />
      <stop
         offset="1"
         stop-color="#ff5454"
         id="stop4" />
    </linearGradient>
  </defs>
  <g
     transform="matrix(.99999 0 0 .99999-58.37.882)"
     enable-background="new"
     id="g13"
     style="fill-opacity:1">
    <circle
       cx="82.37"
       cy="23.12"
       r="24"
       fill="url(#0)"
       id="circle9"
       style="fill-opacity:1;fill:#FF7E00" />
    <path
       d="m87.77 23.725l5.939-5.939c.377-.372.566-.835.566-1.373 0-.54-.189-.997-.566-1.374l-2.747-2.747c-.377-.372-.835-.564-1.373-.564-.539 0-.997.186-1.374.564l-5.939 5.939-5.939-5.939c-.377-.372-.835-.564-1.374-.564-.539 0-.997.186-1.374.564l-2.748 2.747c-.377.378-.566.835-.566 1.374 0 .54.188.997.566 1.373l5.939 5.939-5.939 5.94c-.377.372-.566.835-.566 1.373 0 .54.188.997.566 1.373l2.748 2.747c.377.378.835.564 1.374.564.539 0 .997-.186 1.374-.564l5.939-5.939 5.94 5.939c.377.378.835.564 1.374.564.539 0 .997-.186 1.373-.564l2.747-2.747c.377-.372.566-.835.566-1.373 0-.54-.188-.997-.566-1.373l-5.939-5.94"
       fill="#fff"
       fill-opacity=".842"
       id="path11"
       style="fill-opacity:1;fill:#ffffff" />
  </g>
</svg>

Store

Store is where various parts of the global state are defined. Export the StoreContext object from store/index.js. It will be used later when accessing the dispatch function or the globalState object.

actions.js contains two action creators. updateNotify is used for updating the state for the Notify message. clearNotify can be called when wanting to clear the notification. ...