index.html

<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link rel="stylesheet" href="./katex.css" />

  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <meta name="Description" content="Enter your description here" />

  <title>Learning Redux</title>

  <link rel="stylesheet" href="./style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
  <link rel="stylesheet" href="assets/css/style.css" />
  <link type="text/css" rel="stylesheet" href="assets/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="assets/css/pilcrow.css" />
  <link type="text/css" rel="stylesheet" href="assets/css/hljs-github.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-dark.min.css"
    integrity="sha512-Njdz7T/p6Ud1FiTMqH87bzDxaZBsVNebOWmacBjMdgWyeIhUSFU4V52oGwo3sT+ud+lyIE98sS291/zxBfozKw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  
  <script>
    //Get the button:
    mybutton = document.getElementById( "scrollBtn" );
    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function () {
      scrollFunction()
    };

    function scrollFunction() {
      if ( document.body.scrollTop > 20 || document.documentElement.scrollTop > 20 ) {
        mybutton.style.display = "block";
      } else {
        mybutton.style.display = "none";
      }
    };
    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
      document.body.scrollTop = 0; // For Safari
      document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    };
    window.addEventListener( 'DOMContentLoaded', ( event ) => {
      console.log( 'DOM fully loaded and parsed' );
      const scrollToTop = () => {
        const c = document.documentElement.scrollTop || document.body.scrollTop;
        if ( c > 0 ) {
          window.requestAnimationFrame( scrollToTop );
          window.scrollTo( 0, c - c / 8 );
        }
      };
      scrollToTop();
    } );
  </script>


  <script async defer src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script async defer type="text/javascript" src="assets/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/download-button/prism-download-button.min.js"
    integrity="sha512-rGJwSZEEYPBQjqYxrdg6Ug/6i763XQogKx+N/GF1rCGvfmhIlIUFxCjc4FmEdCu5dvovqxHsoe3IPMKP+KlgNQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script type="text/javascript"
    src="https://platform-api.sharethis.com/js/sharethis.js#property=60c2b3f20cb9f200113df1c3&product=sticky-share-buttons"
    async="async"></script>

  <style>
    .ignore-css {
      all: unset;
    }

    body {
      width: 300px;
      margin: 0 auto;
      font-size: 1.2rem;
      font-family: sans-serif;
    }

    p {
      line-height: 1.4;
    }

    a {
      outline: none;
      text-decoration: none;
      padding: 2px 1px 0;
    }

    a:link {
      color: #f10e0e !important;
    }

    a:visited {
      color: #437a16 !important;
    }

    a:focus {
      border-bottom: 1px solid;
      background: #4206f6 !important;
    }

    a:hover {
      border-bottom: 1px solid;
      background: #07edf9 !important;
    }

    a:active {
      background: #265301;
      color: #cdfeaa;
    }

    iframe {
      height: 800px !important;
      width: 800px !important;
    }

    h1 {
      width:70%!important;
      padding: 10px;
      text-align: center;
      background: rgb(17, 132, 220);
      color: black;
      font-size: 20px;
    }

    #scrollBtn {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 30px;
      z-index: 99;
      border: none;
      outline: none;
      background-color: red;
      color: white;
      cursor: pointer;
      padding: 15px;
      border-radius: 10px;
      font-size: 18px
    }

    #scrollBtn:hover {
      background-color: #555
    }
  </style>
</head>

<body for="html-export">

  <div class="sharethis-sticky-share-buttons"></div>
  <a class="github-corner" href="https://github.com/bgoonz/Learning-Redux" aria-label="View source on Github">

    <svg aria-hidden="true" width="80" height="80" viewbox="0 0 250 250"
      style="z-index: 100000; fill:#194ccdaf; color:#fff; position: fixed; top: 20px; border: 0; left: 20px; transform: scale(-1.5, 1.5);">
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z">

      </path>
      <path class="octo-arm"
        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
        fill="currentColor" style="transform-origin: 130px 106px;">

      </path>
      <path class="octo-body"
        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
        fill="currentColor">

      </path>
    </svg>

  </a>


  <br>
  <br />
  <br />

  <!-- Badge Code - Do Not Change The Code -->
  <a class="hitCounter" href="https://visitorshitcounter.com/" target="_blank" title="Hit counter"
    data-name="86b8037da0e55e778419cb9848fcacc9|5|page|200|rgb(0, 0, 0);|#ffffff|small|s-hit">Hit Counter</a>
  <script>
    document.write( "<script type='text/javascript' src='https://visitorshitcounter.com/js/hitCounter.js?v=" + Date
      .now() + "'><\/script>" );
  </script>
  <!-- Badge Code End Here -->

  <center>
    <h1>Bgoonz Learning Redux Repo:</h1>
    <br />
    <br />
    <div>
 
      <button type="submit"
        style="  position: fixed;  bottom: 80px;  right: 0px;  z-index: 99;  border: none;  outline: none;  background-color: red;  color: white;  cursor: pointer;  padding: 15px;  border-radius: 10px;  font-size: 18px "
        id=" scrollBtn" title="Go to top" onclick="topFunction()">Back To
        Top</button>
    </div>
    <br />
    <h2>Repl For The Repo Behind This Site</h2>
    <br />
    <iframe loading="lazy" style="border:black 4px;" src="https://replit.com/@bgoonz/Learning-Redux?lite=true&amp"></iframe>
    <br />
    <br />

    <br />
    <a style="font-weight: bolder; font-size: larger" href="./directory.html">Navigation</a>
    <br />
    <br />
    <br />

    <br />
    <a style="font-weight: bolder; font-size: larger" href="./DOCS/official/directory.html">Docs</a>
    <br />
    <br />
    <br />

    <iframe loading="lazy" src="https://codesandbox.io/embed/hungry-lichterman-urxh4?fontsize=14&hidenavigation=1&theme=dark"
      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="hungry-lichterman-urxh4"
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

    <br />

    <br />
  </center>
  <div class="mume markdown-preview  ">
    <h1 class="mume-header"
      id="redux-libraries-learning-material-awesomehttpscdnrawgitcomsindresorhusawesomed7305f38d29fed78fa85652e3a63e154dd8e8829mediabadgesvghttpsgithubcomsindresorhusawesome">
      Redux Libraries &amp; Learning Material <a href="https://github.com/sindresorhus/awesome"><img
          src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
          alt="Awesome"></a></h1>

    <p><a href="http://redux.js.org/"><img src="https://rawgit.com/brillout/awesome-redux/master/redux-logo.svg"
          align="right" width="110"></a></p>
    <blockquote>
      <p>Redux is a state container for JavaScript apps.</p>
    </blockquote>
    <ul>
      <li>Official website: <a href="https://devarchy.com/redux"><code class="language-js">devarchy.com/redux</code></a>
      </li>
      <li>Use devarchy to add a library to the catalog</li>
    </ul>
    <br>
    <h4 class="mume-header" id="contents">Contents</h4>

    <ul>
      <li><a href="#code-architecture">Code Architecture</a></li>
      <li><a href="#utilities">Utilities</a></li>
      <li><a href="#code-style">Code Style</a></li>
      <li><a href="#dev-tools--inspection-tools">Dev tools / Inspection tools</a></li>
      <li><a href="#react-integration">React Integration</a></li>
      <li><a href="#other-integrations">Other Integrations</a></li>
      <li><a href="#boilerplate">Boilerplate</a></li>
      <li><a href="#miscellaneous">Miscellaneous</a></li>
      <li><a href="#learning-material">Learning Material</a></li>
      <li><a href="#community">Community</a></li>
    </ul>
    <br>
    <h2 class="mume-header" id="code-architecture">Code Architecture</h2>
    <blockquote>
      <p><em>Aims to improve the overall structure of the source code. Makes reasoning about the code easier.</em></p>
    </blockquote>
    <ul>
      <li><a href="https://github.com/ddsol/redux-schema">redux-schema</a> - Automatic actions, reducers and validation
        for Redux.</li>
      <li><a href="https://github.com/gcanti/redux-tcomb">redux-tcomb</a> - Immutable and type-checked state and actions
        for Redux.</li>
      <li><a href="https://github.com/cerebral/redux-action-tree">redux-action-tree</a> - The Cerebral signals running
        with Redux.</li>
      <li><a href="https://github.com/salsita/redux-elm">redux-elm</a> - The Elm Architecture in JavaScript.</li>
    </ul>
    <h2 class="mume-header" id="utilities">Utilities</h2>

    <ul>
      <li><a href="https://github.com/tommikaikkonen/redux-orm">redux-orm</a> - Small, simple and immutable ORM to
        manage relational data in your Redux store.</li>
      <li><a href="https://github.com/agraboso/redux-api-middleware">redux-api-middleware</a> - Redux middleware for
        calling an API.</li>
      <li><a href="https://github.com/omnidan/redux-ignore">redux-ignore</a> - Higher-order reducer to ignore Redux
        actions.</li>
      <li><a href="https://github.com/calvinfroedge/redux-modifiers">redux-modifiers</a> - Collection of generic
        functions for writing Redux reducers to operate on various data structures.</li>
      <li><a href="https://github.com/slorber/rereduce">rereduce</a> - Reducer library for Redux.</li>
      <li><a href="https://github.com/treasure-data/redux-search">redux-search</a> - Redux bindings for client-side
        search.</li>
      <li><a href="https://github.com/evgenyrodionov/redux-logger">redux-logger</a> - Logger middleware for Redux.</li>
      <li><a href="https://github.com/gajus/redux-immutable">redux-immutable</a> - Redux-immutable is used to create an
        equivalent function of Redux combineReducers that works with Immutable.js state.</li>
      <li><a href="https://github.com/reactjs/reselect">reselect</a> - Selector library for Redux.</li>
      <li><a href="https://github.com/idolize/redux-requests">redux-requests</a> - Manages in-flight requests with a
        Redux reducer to avoid issuing duplicate requests.</li>
      <li><a href="https://github.com/omnidan/redux-undo">redux-undo</a> - Higher order reducer to add undo/redo
        functionality to Redux state containers.</li>
      <li><a href="https://github.com/dtschust/redux-bug-reporter">redux-bug-reporter</a> - Bug reporter and bug
        playback tool for Redux.</li>
      <li><a href="https://github.com/acdlite/redux-transducers">redux-transducers</a> - Transducer utilities for Redux.
      </li>
    </ul>
    <h3 class="mume-header" id="store-persistence">Store Persistence</h3>

    <ul>
      <li><a href="https://github.com/michaelcontento/redux-storage">redux-storage</a> - Persistence layer for Redux
        with flexible backends.</li>
      <li><a href="https://github.com/rt2zz/redux-persist">redux-persist</a> - Persist and rehydrate a Redux store.</li>
    </ul>
    <h3 class="mume-header" id="side-effects">Side Effects</h3>
    <blockquote>
      <p><em>Side Effects / Asynchronous Actions</em></p>

    </blockquote>
    <ul>
      <li><a href="https://github.com/yelouafi/redux-saga">redux-saga</a> - Alternative side effect model for Redux
        apps.</li>
    </ul>

    <li><a href="https://github.com/pburtchaell/redux-promise-middleware">redux-promise-middleware</a> - Redux
      middleware for resolving and rejecting promises with conditional optimistic updates.</li>
    <li><a href="https://github.com/redux-effects/redux-effects">redux-effects</a> - You write pure functions,
      redux-effects handles the rest.</li>
    <li><a href="https://github.com/gaearon/redux-thunk">redux-thunk</a> - Thunk middleware for Redux.</li>
    <li><a href="https://github.com/makeomatic/redux-connect">redux-connect</a> - Provides decorator for resolving
      async props in react-router, extremely useful for handling server-side rendering in React.</li>
    <li><a href="https://github.com/redux-loop/redux-loop">redux-loop</a> - Port of elm-effects and the Elm
      Architecture to Redux that allows you to sequence your effects naturally and purely by returning them from your
      reducers.</li>
    <li><a href="https://github.com/salsita/redux-side-effects">redux-side-effects</a> - Redux toolset for keeping all
      the side effects inside your reducers while maintaining their purity.</li>
    <li><a href="https://github.com/jeffbski/redux-logic">redux-logic</a> - Redux middleware for organizing business
      logic and action side effects.</li>
    <li><a href="https://github.com/redux-observable/redux-observable">redux-observable</a> - RxJS middleware for
      action side effects in Redux using &quot;Epics&quot;.</li>
    <li><a href="https://github.com/clarus/redux-ship">redux-ship</a> - Composable, testable and typable side effects.
    </li>
    </ul>
    <h2 class="mume-header" id="code-style">Code Style</h2>
    <blockquote>
      <p><em>Aims to make parts of the source code easier to read/write.</em></p>
    </blockquote>
    <ul>
      <li><a href="https://github.com/pauldijou/redux-act">redux-act</a> - Opinionated lib to create actions and
        reducers for Redux.</li>
      <li><a href="https://github.com/Versent/redux-crud">redux-crud</a> - Set of standard actions and reducers for
        Redux CRUD Applications.</li>
    </ul>
    <h2 class="mume-header" id="dev-tools-inspection-tools">Dev tools / Inspection tools</h2>

    <ul>
      <li><a href="https://github.com/alexkuz/redux-devtools-inspector">redux-devtools-inspector</a> - Another Redux
        DevTools Monitor.</li>
      <li><a href="https://github.com/fcomb/redux-diff-logger">redux-diff-logger</a> - Diff logger between states for
        Redux.</li>
      <li><a href="https://github.com/romseguy/redux-devtools-chart-monitor">redux-devtools-chart-monitor</a> - Chart
        monitor for Redux DevTools.</li>
      <li><a href="https://github.com/gaearon/redux-devtools">redux-devtools</a> - DevTools for Redux with hot
        reloading, action replay, and customizable UI.</li>
      <li><a href="https://github.com/YoruNoHikage/redux-devtools-dispatch">redux-devtools-dispatch</a> - Dispatch your
        actions manually to test if your app Reacts well.</li>
      <li><a href="https://github.com/gaearon/redux-devtools-dock-monitor">redux-devtools-dock-monitor</a> - Resizable
        and movable dock for Redux DevTools monitors.</li>
      <li><a
          href="https://github.com/bvaughn/redux-devtools-filterable-log-monitor">redux-devtools-filterable-log-monitor</a>
        - Filterable tree view monitor for Redux DevTools.</li>
      <li><a href="https://github.com/gaearon/redux-devtools-log-monitor">redux-devtools-log-monitor</a> - The default
        monitor for Redux DevTools with a tree view.</li>
      <li><a href="https://github.com/zalmoxisus/remote-redux-devtools">remote-redux-devtools</a> - Redux DevTools
        remotely.</li>
    </ul>
    <h2 class="mume-header" id="react-integration">React Integration</h2>

    <ul>
      <li><a href="https://github.com/conorhastings/redux-test-recorder">redux-test-recorder</a> - Redux middleware to
        automatically generate tests for reducers through ui interaction.</li>
      <li><a href="https://github.com/reactjs/react-redux">react-redux</a> - Official React bindings for Redux.</li>
      <li><a href="https://github.com/keystonejs/react-easy-universal">react-easy-universal</a> - Universal Routing
        &amp; Rendering with React &amp; Redux was too hard. Now it&apos;s easy.</li>
      <li><a href="https://github.com/erikras/redux-form-material-ui">redux-form-material-ui</a> - Set of wrapper
        components to facilitate using Material UI with Redux Form.</li>
    </ul>
    <h3 class="mume-header" id="routing">Routing</h3>

    <ul>
      <li><a href="https://github.com/Rezonans/redux-async-connect">redux-async-connect</a> - It allows you to request
        async data, store them in Redux state and connect them to your React component.</li>
      <li><a href="https://github.com/Agamennon/redux-tiny-router">redux-tiny-router</a> - Router made for Redux and
        made for universal apps. Stop using the router as a controller, it&apos;s just state.</li>
      <li><a href="https://github.com/acdlite/redux-router">redux-router</a> - Redux bindings for React Router &#x2013;
        keep your router state inside your Redux store.</li>
      <li><a href="https://github.com/reactjs/react-router-redux">react-router-redux</a> - Ruthlessly simple bindings to
        keep react-router and Redux in sync.</li>
      <li><a href="https://github.com/raisemarketplace/ground-control">ground-control</a> - Scalable reducer management
        &amp; powerful data fetching for React Router &amp; Redux.</li>
    </ul>
    <h3 class="mume-header" id="forms">Forms</h3>

    <ul>
      <li><a href="https://github.com/erikras/redux-form">redux-form</a> - Higher Order Component using react-redux to
        keep form state in a Redux store.</li>
      <li><a href="https://github.com/davidkpiano/react-redux-form">react-redux-form</a> - Create forms easily in React
        with Redux.</li>
    </ul>
    <h3 class="mume-header" id="component-state">Component State</h3>

    <ul>
      <li><a href="https://github.com/threepointone/redux-react-local">redux-react-local</a> - Local component state via
        Redux.</li>
      <li><a href="https://github.com/tonyhb/redux-ui">redux-ui</a> - Easy UI state management for React Redux.</li>
    </ul>
    <h2 class="mume-header" id="other-integrations">Other Integrations</h2>

    <h3 class="mume-header" id="flux">Flux</h3>

    <ul>
      <li><a href="https://github.com/acdlite/redux-actions">redux-actions</a> - Flux Standard Action utilities for
        Redux.</li>
      <li><a href="https://github.com/acdlite/redux-promise">redux-promise</a> - FSA-compliant promise middleware for
        Redux.</li>
    </ul>
    <h3 class="mume-header" id="backbone">Backbone</h3>

    <ul>
      <li><a href="https://github.com/redbooth/backbone-redux">backbone-redux</a> - Easy way to keep your backbone
        collections and Redux store in sync.</li>
    </ul>
    <h3 class="mume-header" id="falcor">Falcor</h3>

    <ul>
      <li><a href="https://github.com/ekosz/redux-falcor">redux-falcor</a> - Connect your Redux front-end to your falcor
        back-end.</li>
    </ul>
    <h3 class="mume-header" id="rxjs">RxJS</h3>

    <ul>
      <li><a href="https://github.com/redux-observable/redux-observable">redux-observable</a> - RxJS middleware for
        action side effects in Redux using &quot;Epics&quot;.</li>
      <li><a href="https://github.com/jas-chen/rx-redux">rx-redux</a> - Reimplementation of Redux using RxJS.</li>
      <li><a href="https://github.com/acdlite/redux-rx">redux-rx</a> - RxJS utilities for Redux.</li>
      <li><a href="https://github.com/shiftyp/redurx">redurx</a> - Redux&apos;ish Functional State Management using
        RxJS.</li>
    </ul>
    <h3 class="mume-header" id="electron">Electron</h3>

    <ul>
      <li><a href="https://github.com/samiskin/redux-electron-store">redux-electron-store</a> - Redux store enhancer
        that allows automatic synchronization between electron processes.</li>
    </ul>
    <h3 class="mume-header" id="deku">Deku</h3>

    <ul>
      <li><a href="https://github.com/troch/deku-redux">deku-redux</a> - Bindings for Redux in deku &lt; v2.</li>
    </ul>
    <h3 class="mume-header" id="other">Other</h3>

    <ul>
      <li><a href="https://github.com/netguru/redux-rollbar-middleware">redux-rollbar-middleware</a> - Redux middleware
        that wraps exceptions in actions and sends them to Rollbar with current state.</li>
      <li><a href="https://github.com/outlandishideas/kasia">kasia</a> - React Redux toolset for the WordPress API.</li>
    </ul>
    <h2 class="mume-header" id="boilerplate">Boilerplate</h2>

    <p><em>Boilerplates / Scaffolds / Starter Kits / Generators / Stack Ensembles</em></p>
    <ul>
      <li><a href="https://github.com/SpencerCDixon/redux-cli">redux-cli</a> - Opinionated CLI for building Redux/React
        apps quicker.</li>
      <li><a href="https://github.com/reactuate/reactuate">reactuate</a> - React/Redux stack (not a boilerplate kit).
      </li>
      <li><a
          href="https://github.com/jhen0409/react-chrome-extension-boilerplate">react-chrome-extension-boilerplate</a> -
        Boilerplate for Chrome Extension React.js project.</li>
      <li><a href="https://github.com/bdefore/universal-redux">universal-redux</a> - Npm package that lets you jump
        right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack
        configurations if you want to.</li>
      <li><a href="https://github.com/pauldotknopf/react-aspnet-boilerplate">generator-react-aspnet-boilerplate</a> -
        Starting point for building isomorphic React applications with <a href="http://ASP.NET">ASP.NET</a> Core 1,
        leveraging existing techniques.</li>
      <li><a href="https://github.com/banderson/generator-redux">generator-redux</a> - CLI tools for Redux: next-gen
        functional Flux/React with devtools.</li>
      <li><a href="https://github.com/stylesuxx/generator-react-webpack-redux">generator-react-webpack-redux</a> - React
        Webpack Generator including Redux support.</li>
      <li><a href="https://github.com/matthewmueller/socrates">socrates</a> - Small (8kb), batteries-included Redux
        store to reduce boilerplate and promote good habits.</li>
    </ul>
    <h2 class="mume-header" id="miscellaneous">Miscellaneous</h2>

    <ul>
      <li><a href="https://github.com/jas-chen/redux-core">redux-core</a> - Minimal Redux.</li>
    </ul>
    <h2 class="mume-header" id="learning-material">Learning Material</h2>

    <ul>
      <li>
        <p><strong>Redux&apos;s concepts</strong></p>
        <p><a href="http://redux.js.org/">Redux official documentation</a> does a great job at explaining Redux&apos;s
          core principles.</p>
      </li>
      <li>
        <p><strong>Why immutable data structures</strong></p>
        <p>The <a href="https://facebook.github.io/react/docs/advanced-performance.html">guide on performance</a> of
          React&apos;s official documentation explains well what immutable data structures are and why they play an
          important role.</p>
      </li>
      <li>
        <p><strong>Side Effects</strong></p>
        <p><a href="https://github.com/redux-loop/redux-loop">Redux Loop&apos;s readme</a> gives a good insight on Side
          Effects in the context of Redux.</p>
      </li>
    </ul>
    <p>Reading the aforementioned material will get you a good start for writing apps with Redux.<br>
      If you are curious for more, check out following resources.</p>
    <ul>
      <li>
        <p><strong>Functional Programming - Basics</strong></p>
        <p>This <a href="http://jaysoo.ca/2016/01/13/functional-programming-little-ideas/">post</a> goes over basic
          concepts of functional programming while building a YouTube instant search demo app.</p>
      </li>
      <li>
        <p><strong>Reactive Programming</strong></p>
        <p>This <a href="https://gist.github.com/staltz/868e7e9bc2a7b8c1f754">introduction to Reactive Programming</a>
          explains Reactive Programming with clarity.</p>
      </li>
      <li>
        <p><strong>Functional Programming - Going beyond</strong></p>
        <p>Well written <a
            href="https://medium.com/@chetcorcos/functional-programming-for-javascript-people-1915d8775504">article</a>
          that talks about interesting computer science concepts implemented in functional languages and how these apply
          to JavaScript.</p>
      </li>
      <li>
        <p><strong>Monads</strong></p>
        <p>Curious about monads? Wikipedia gives a good <a
            href="https://en.wikipedia.org/wiki/Monad_(functional_programming)">overview on monads</a> and <a
            href="http://adit.io/posts/2013-04-17-functors,_applicatives,_and_monads_in_pictures.html">this article</a>
          explains monads in more details with graphics and simple examples.</p>
      </li>
    </ul>
    <h2 class="mume-header" id="community">Community</h2>

    <ul>
      <li><a href="https://www.reddit.com/r/reduxjs/">Reddit</a></li>
      <li><a href="http://stackoverflow.com/questions/tagged/redux">Stack Overflow</a></li>
      <li><a href="https://discord.gg/0ZcbPKXt5bZ6au5t">Discord</a></li>
      <li><a href="http://slack.redux.io/">Slack</a></li>
      <li><a href="https://gitter.im/reactjs/redux">Gitter</a></li>
      <li><a href="https://webchat.freenode.net/"><code class="language-js">#rackt</code> on freenode</a></li>
    </ul>


    <br />

    <iframe loading="lazy" src="https://codesandbox.io/embed/crazy-smoke-17b98?fontsize=14&hidenavigation=1&theme=dark" style="
          width: 90%;
          height: 500px;
          border: 0;
          border-radius: 4px;
          overflow: hidden;
        " title="crazy-smoke-17b98"
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
    <br />
    <br />
    <iframe loading="lazy" src="https://codesandbox.io/embed/react-redux-example-forked-xrlj1?fontsize=14&hidenavigation=1&theme=dark"
      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
      title="React-Redux example (forked)"
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
    <br />

    <br />

    <iframe
      src="https://codesandbox.io/embed/react-redux-tutorial-for-beginners-learning-redux-in-2018-forked-3p58w?fontsize=14&hidenavigation=1&theme=dark"
      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
      title="React Redux Tutorial for Beginners, learning Redux in 2018  (forked)"
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

    <br />

    <br />

    <iframe loading="lazy" src="https://codesandbox.io/embed/learn-redux-forked-q10lp?fontsize=14&hidenavigation=1&theme=dark"
      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="learn-redux (forked)"
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>


    <br />

    <br />


    <iframe loading="lazy" src="https://codesandbox.io/embed/redux-in-5-minutes-forked-qd377?fontsize=14&hidenavigation=1&theme=dark"
      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
      title="Redux in 5 minutes (forked)"
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

    <br />

    <br />
    <h1 class="mume-header" id="getting-started-with-react-redux-react-redux">Getting Started with React Redux | React
      Redux</h1>

    <blockquote>
      <p>Introduction &gt; Getting Started: First steps with React Redux</p>
    </blockquote>
    <p><a href="https://github.com/reduxjs/react-redux">React Redux</a> is the official <a
        href="https://reactjs.org/">React</a> UI bindings layer for <a href="https://redux.js.org/">Redux</a>. It lets
      your React components read data from a Redux store, and dispatch actions to the store to update state.</p>
    <h2 class="mume-header" id="installationinstallation-direct-link-to-heading">Installation<a href="#installation"
        title="Direct link to heading">#</a></h2>

    <p>React Redux 7.1+ requires <strong>React 16.8.3 or later</strong>, in order to make use of React Hooks.</p>
    <h3 class="mume-header" id="using-create-react-appusing-create-react-app-direct-link-to-heading">Using Create React
      App<a href="#using-create-react-app" title="Direct link to heading">#</a></h3>

    <p>The recommended way to start new apps with React and Redux is by using the <a
        href="https://github.com/reduxjs/cra-template-redux">official Redux+JS template</a> or <a
        href="https://github.com/reduxjs/cra-template-redux-typescript">Redux+TS template</a> for <a
        href="https://github.com/facebook/create-react-app">Create React App</a>, which takes advantage of <strong><a
          href="https://redux-toolkit.js.org/">Redux Toolkit</a></strong> and React Redux&apos;s integration with React
      components.</p>
    <h3 class="mume-header" id="an-existing-react-appan-existing-react-app-direct-link-to-heading">An Existing React
      App<a href="#an-existing-react-app" title="Direct link to heading">#</a></h3>

    <p>To use React Redux with your React app, install it as a dependency:</p>
    <p>You&apos;ll also need to <a href="https://redux.js.org/introduction/installation">install Redux</a> and <a
        href="https://redux.js.org/recipes/configuring-your-store/">set up a Redux store</a> in your app.</p>
    <p>If you are using TypeScript, the React Redux types are maintained separately in DefinitelyTyped, but included as
      a dependency of the <code class="language-js">react-redux</code> package, so they should be installed
      automatically. If you still need
      to install them manually, run:</p>
    <h2 class="mume-header" id="api-overviewapi-overview-direct-link-to-heading">API Overview<a href="#api-overview"
        title="Direct link to heading">#</a></h2>

    <h3 class="mume-header" id="providerprovider-direct-link-to-heading"><code class="language-js">Provider</code><a
        href="#provider" title="Direct link to heading">#</a></h3>

    <p>React Redux includes a <code class="language-js">&lt;Provider /&gt;</code> component, which makes the Redux store
      available to the
      rest of your app:</p>
    <h3 class="mume-header" id="hookshooks-direct-link-to-heading">Hooks<a href="#hooks"
        title="Direct link to heading">#</a></h3>

    <p>React Redux provides a pair of custom React hooks that allow your React components to interact with the Redux
      store.</p>
    <p><code class="language-js">useSelector</code> reads a value from the store state and subscribes to updates, while
      <code class="language-js">useDispatch</code> returns the store&apos;s <code class="language-js">dispatch</code>
      method to let you dispatch actions.
    </p>
    <h2 class="mume-header" id="learning-react-reduxlearning-react-redux-direct-link-to-heading">Learning React Redux<a
        href="#learning-react-redux" title="Direct link to heading">#</a></h2>

    <h3 class="mume-header" id="learn-modern-redux-livestreamlearn-modern-redux-livestream-direct-link-to-heading">Learn
      Modern Redux Livestream<a href="#learn-modern-redux-livestream" title="Direct link to heading">#</a></h3>

    <p>Redux maintainer Mark Erikson appeared on the &quot;Learn with Jason&quot; show to explain how we recommend using
      Redux today. The show includes a live-coded example app that shows how to use Redux Toolkit and React-Redux hooks
      with Typescript, as well as the new RTK Query data fetching APIs.</p>
    <p>See <a href="https://www.learnwithjason.dev/let-s-learn-modern-redux">the &quot;Learn Modern Redux&quot; show
        notes page</a> for a transcript and links to the example app source.</p>
    <h2 class="mume-header" id="help-and-discussionhelp-and-discussion-direct-link-to-heading">Help and Discussion<a
        href="#help-and-discussion" title="Direct link to heading">#</a></h2>

    <p>The <strong><a href="https://discord.gg/0ZcbPKXt5bZ6au5t">#redux channel</a></strong> of the <strong><a
          href="http://www.reactiflux.com/">Reactiflux Discord community</a></strong> is our official resource for all
      questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn -
      come join us!</p>
    <p>You can also ask questions on <a href="https://stackoverflow.com/">Stack Overflow</a> using the <strong><a
          href="https://stackoverflow.com/questions/tagged/redux">#redux tag</a></strong>.</p>


    <h2 class="mume-header" id="introductionintroduction-direct-link-to-heading"><a href="#introduction"
        title="Direct link to heading">Introduction</a></h2>

    <p>Welcome to the Redux Essentials tutorial! <strong>This tutorial will introduce you to Redux and teach you how to
        use it the right way, using our latest recommended tools and best practices</strong>. By the time you finish,
      you should be able to start building your own Redux applications using the tools and patterns you&apos;ve learned
      here.</p>
    <p>In Part 1 of this tutorial, we&apos;ll cover the key concepts and terms you need to know to use Redux, and in <a
        href="chrome-extension://cjedbglnccaioiolemnfhjncicchinao/tutorials/essentials/part-2-app-structure">Part 2:
        Redux App Structure</a> we&apos;ll examine a basic React + Redux app to see how the pieces fit together.</p>
    <p>Starting in <a
        href="chrome-extension://cjedbglnccaioiolemnfhjncicchinao/tutorials/essentials/part-3-data-flow">Part 3: Basic
        Redux Data Flow</a>, we&apos;ll use that knowledge to build a small social media feed app with some real-world
      features, see how those pieces actually work in practice, and talk about some important patterns and guidelines
      for using Redux.</p>
    <h3 class="mume-header" id="how-to-read-this-tutorialhow-to-read-this-tutorial-direct-link-to-heading"><a
        href="#how-to-read-this-tutorial" title="Direct link to heading">How to Read This Tutorial</a></h3>

    <p>This page will focus on showing you <em>how</em> to use Redux the right way, and explain just enough of the
      concepts so that you can understand how to build Redux apps correctly.</p>
    <p>We&apos;ve tried to keep these explanations beginner-friendly, but we do need to make some assumptions about what
      you know already:</p>
    <p><strong>If you&apos;re not already comfortable with those topics, we encourage you to take some time to become
        comfortable with them first, and then come back to learn about Redux</strong>. We&apos;ll be here when
      you&apos;re ready!</p>
    <p>You should make sure that you have the React and Redux DevTools extensions installed in your browser:</p>
    <ul>
      <li>React DevTools Extension:
        <ul>
          <li><a
              href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en">React
              DevTools Extension for Chrome</a></li>
          <li><a href="https://addons.mozilla.org/en-US/firefox/addon/react-devtools/">React DevTools Extension for
              Firefox</a></li>
        </ul>
      </li>
      <li>Redux DevTools Extension:
        <ul>
          <li><a
              href="https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en">Redux
              DevTools Extension for Chrome</a></li>
          <li><a href="https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/">Redux DevTools Extension for
              Firefox</a></li>
        </ul>
      </li>
    </ul>
    <h2 class="mume-header" id="what-is-reduxwhat-is-redux-direct-link-to-heading"><a href="#what-is-redux"
        title="Direct link to heading">What is Redux?</a></h2>

    <p>It helps to understand what this &quot;Redux&quot; thing is in the first place. What does it do? What problems
      does it help me solve? Why would I want to use it?</p>
    <p><strong>Redux is a pattern and library for managing and updating application state, using events called
        &quot;actions&quot;.</strong> It serves as a centralized store for state that needs to be used across your
      entire application, with rules ensuring that the state can only be updated in a predictable fashion.</p>
    <h3 class="mume-header" id="why-should-i-use-reduxwhy-should-i-use-redux-direct-link-to-heading">Why Should I Use
      Redux?<a href="#why-should-i-use-redux" title="Direct link to heading">#</a></h3>

    <p>Redux helps you manage &quot;global&quot; state - state that is needed across many parts of your application.</p>
    <p><strong>The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state
        in your application is being updated, and how your application logic will behave when those changes
        occur</strong>. Redux guides you towards writing code that is predictable and testable, which helps give you
      confidence that your application will work as expected.</p>
    <h3 class="mume-header" id="when-should-i-use-reduxwhen-should-i-use-redux-direct-link-to-heading">When Should I Use
      Redux?<a href="#when-should-i-use-redux" title="Direct link to heading">#</a></h3>

    <p>Redux helps you deal with shared state management, but like any tool, it has tradeoffs. There are more concepts
      to learn, and more code to write. It also adds some indirection to your code, and asks you to follow certain
      restrictions. It&apos;s a trade-off between short term and long term productivity.</p>
    <p>Redux is more useful when:</p>
    <ul>
      <li>You have large amounts of application state that are needed in many places in the app</li>
      <li>The app state is updated frequently over time</li>
      <li>The logic to update that state may be complex</li>
      <li>The app has a medium or large-sized codebase, and might be worked on by many people</li>
    </ul>
    <p><strong>Not all apps need Redux. Take some time to think about the kind of app you&apos;re building, and decide
        what tools would be best to help solve the problems you&apos;re working on.</strong></p>
    <h3 class="mume-header" id="redux-libraries-and-toolsredux-libraries-and-tools-direct-link-to-heading">Redux
      Libraries and Tools<a href="#redux-libraries-and-tools" title="Direct link to heading">#</a></h3>

    <p>Redux is a small standalone JS library. However, it is commonly used with several other packages:</p>
    <h4 class="mume-header" id="react-reduxreact-redux-direct-link-to-heading">React-Redux<a href="#react-redux"
        title="Direct link to heading">#</a></h4>

    <p>Redux can integrate with any UI framework, and is most frequently used with React. <a
        href="https://react-redux.js.org/"><strong>React-Redux</strong></a> is our official package that lets your React
      components interact with a Redux store by reading pieces of state and dispatching actions to update the store.</p>
    <h4 class="mume-header" id="redux-toolkitredux-toolkit-direct-link-to-heading">Redux Toolkit<a href="#redux-toolkit"
        title="Direct link to heading">#</a></h4>

    <p><a href="https://redux-toolkit.js.org/"><strong>Redux Toolkit</strong></a> is our recommended approach for
      writing Redux logic. It contains packages and functions that we think are essential for building a Redux app.
      Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and
      makes it easier to write Redux applications.</p>
    <h4 class="mume-header" id="redux-devtools-extensionredux-devtools-extension-direct-link-to-heading">Redux DevTools
      Extension<a href="#redux-devtools-extension" title="Direct link to heading">#</a></h4>

    <p>The <a href="https://github.com/zalmoxisus/redux-devtools-extension"><strong>Redux DevTools
          Extension</strong></a> shows a history of the changes to the state in your Redux store over time. This allows
      you to debug your applications effectively, including using powerful techniques like &quot;time-travel
      debugging&quot;.</p>
    <h2 class="mume-header" id="redux-terms-and-conceptsredux-terms-and-concepts-direct-link-to-heading">Redux Terms and
      Concepts<a href="#redux-terms-and-concepts" title="Direct link to heading">#</a></h2>

    <p>Before we dive into some actual code, let&apos;s talk about some of the terms and concepts you&apos;ll need to
      know to use Redux.</p>
    <h3 class="mume-header" id="state-managementstate-management-direct-link-to-heading">State Management<a
        href="#state-management" title="Direct link to heading">#</a></h3>

    <p>Let&apos;s start by looking at a small React counter component. It tracks a number in component state, and
      increments the number when a button is clicked:</p>
    <p>It is a self-contained app with the following parts:</p>
    <ul>
      <li>The <strong>state</strong>, the source of truth that drives our app;</li>
      <li>The <strong>view</strong>, a declarative description of the UI based on the current state</li>
      <li>The <strong>actions</strong>, the events that occur in the app based on user input, and trigger updates in the
        state</li>
    </ul>
    <p>This is a small example of <strong>&quot;one-way data flow&quot;</strong>:</p>
    <ul>
      <li>State describes the condition of the app at a specific point in time</li>
      <li>The UI is rendered based on that state</li>
      <li>When something happens (such as a user clicking a button), the state is updated based on what occurred</li>
      <li>The UI re-renders based on the new state</li>
    </ul>
    <p><img src="https://redux.js.org/assets/images/ReduxDataFlowDiagram-49fa8c3968371d9ef6f2a1486bd40a26.gif"
        alt="One-way data flow"></p>
    <p>However, the simplicity can break down when we have <strong>multiple components that need to share and use the
        same state</strong>, especially if those components are located in different parts of the application. Sometimes
      this can be solved by <a href="https://reactjs.org/docs/lifting-state-up.html">&quot;lifting state up&quot;</a> to
      parent components, but that doesn&apos;t always help.</p>
    <p>One way to solve this is to extract the shared state from the components, and put it into a centralized location
      outside the component tree. With this, our component tree becomes a big &quot;view&quot;, and any component can
      access the state or trigger actions, no matter where they are in the tree!</p>
    <p>By defining and separating the concepts involved in state management and enforcing rules that maintain
      independence between views and states, we give our code more structure and maintainability.</p>
    <p>This is the basic idea behind Redux: a single centralized place to contain the global state in your application,
      and specific patterns to follow when updating that state to make the code predictable.</p>
    <h3 class="mume-header" id="immutabilityimmutability-direct-link-to-heading">Immutability<a href="#immutability"
        title="Direct link to heading">#</a></h3>

    <p>&quot;Mutable&quot; means &quot;changeable&quot;. If something is &quot;immutable&quot;, it can never be changed.
    </p>
    <p>JavaScript objects and arrays are all mutable by default. If I create an object, I can change the contents of its
      fields. If I create an array, I can change the contents as well:</p>
    <p>This is called <em>mutating</em> the object or array. It&apos;s the same object or array reference in memory, but
      now the contents inside the object have changed.</p>
    <p><strong>In order to update values immutably, your code must make <em>copies</em> of existing objects/arrays, and
        then modify the copies</strong>.</p>
    <p>We can do this by hand using JavaScript&apos;s array / object spread operators, as well as array methods that
      return new copies of the array instead of mutating the original array:</p>
    <p><strong>Redux expects that all state updates are done immutably</strong>. We&apos;ll look at where and how this
      is important a bit later, as well as some easier ways to write immutable update logic.</p>
    <h3 class="mume-header" id="terminologyterminology-direct-link-to-heading">Terminology<a href="#terminology"
        title="Direct link to heading">#</a></h3>

    <p>There are some important Redux terms that you&apos;ll need to be familiar with before we continue:</p>
    <h4 class="mume-header" id="actionsactions-direct-link-to-heading">Actions<a href="#actions"
        title="Direct link to heading">#</a></h4>

    <p>An <strong>action</strong> is a plain JavaScript object that has a <code class="language-js">type</code> field.
      <strong>You can think
        of an action as an event that describes something that happened in the application</strong>.
    </p>
    <p>The <code class="language-js">type</code> field should be a string that gives this action a descriptive name,
      like
      <code class="language-js">&quot;todos/todoAdded&quot;</code>. We usually write that type string like
      <code class="language-js">&quot;domain/eventName&quot;</code>
      , where the first part is the feature or category that this action
      belongs to, and the second part is the specific thing that happened.
    </p>

    <iframe loading="lazy" src="https://codesandbox.io/embed/hardcore-tdd-kowsj?fontsize=14&hidenavigation=1&theme=dark"
      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="hardcore-tdd-kowsj"
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
    <p>An action object can have other fields with additional information about what happened. By convention, we put
      that information in a field called <code class="language-js">payload</code>.</p>
    <p>A typical action object might look like this:</p>
    <h4 class="mume-header" id="action-creatorsaction-creators-direct-link-to-heading">Action Creators<a
        href="#action-creators" title="Direct link to heading">#</a></h4>

    <p>An <strong>action creator</strong> is a function that creates and returns an action object. We typically use
      these so we don&apos;t have to write the action object by hand every time:</p>
    <h4 class="mume-header" id="reducersreducers-direct-link-to-heading">Reducers<a href="#reducers"
        title="Direct link to heading">#</a></h4>

    <p>A <strong>reducer</strong> is a function that receives the current <code class="language-js">state</code> and an
      <code class="language-js">action</code>
      object, decides how to update the state if necessary, and returns the new state:
      <code class="language-js">(state, action) =&gt; newState</code>. <strong>You can think of a reducer as an event
        listener which handles
        events based on the received action (event) type.</strong>
    </p>
    <h5 class="mume-header" id="info">info</h5>

    <p>&quot;Reducer&quot; functions get their name because they&apos;re similar to the kind of callback function you
      pass to the <a
        href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce"><code
          class="language-js">Array.reduce()</code></a>
      method.</p>
    <p>Reducers must <em>always</em> follow some specific rules:</p>
    <ul>
      <li>They should only calculate the new state value based on the <code class="language-js">state</code> and <code
          class="language-js">action</code>
        arguments</li>
      <li>They are not allowed to modify the existing <code class="language-js">state</code>. Instead, they must make
        <em>immutable
          updates</em>, by copying the existing <code class="language-js">state</code> and making changes to the copied
        values.
      </li>
      <li>They must not do any asynchronous logic, calculate random values, or cause other &quot;side effects&quot;</li>
    </ul>
    <p>We&apos;ll talk more about the rules of reducers later, including why they&apos;re important and how to follow
      them correctly.</p>
    <p>The logic inside reducer functions typically follows the same series of steps:</p>
    <ul>
      <li>Check to see if the reducer cares about this action
        <ul>
          <li>If so, make a copy of the state, update the copy with new values, and return it</li>
        </ul>
      </li>
      <li>Otherwise, return the existing state unchanged</li>
    </ul>
    <p>Here&apos;s a small example of a reducer, showing the steps that each reducer should follow:</p>
    <p>Reducers can use any kind of logic inside to decide what the new state should be: <code
        class="language-js">if/else</code>,
      <code class="language-js">switch</code>, loops, and so on.
    </p>
    <h4 class="mume-header" id="detailed-explanation-why-are-they-called-reducers">Detailed Explanation: Why Are They
      Called &apos;Reducers?&apos;</h4>

    <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce"><code
          class="language-js">Array.reduce()</code></a>
      method lets you take an array of values, process each item in the array one at a time, and return a single final
      result. You can think of it as &quot;reducing the array down to one value&quot;.</p>
    <p><code class="language-js">Array.reduce()</code> takes a callback function as an argument, which will be called
      one time for each item
      in the array. It takes two arguments:</p>
    <ul>
      <li><code class="language-js">previousResult</code>, the value that your callback returned last time</li>
      <li><code class="language-js">currentItem</code>, the current item in the array</li>
    </ul>
    <p>The first time that the callback runs, there isn&apos;t a <code class="language-js">previousResult</code>
      available, so we need to
      also pass in an initial value that will be used as the first <code class="language-js">previousResult</code>.</p>
    <p>If we wanted to add together an array of numbers to find out what the total is, we could write a reduce callback
      that looks like this:</p>
    <p>Notice that this <code class="language-js">addNumbers</code> &quot;reduce callback&quot; function doesn&apos;t
      need to keep track of
      anything itself. It takes the <code class="language-js">previousResult</code> and <code
        class="language-js">currentItem</code> arguments, does something
      with them, and returns a new result value.</p>
    <p><strong>A Redux reducer function is exactly the same idea as this &quot;reduce callback&quot; function!</strong>
      It takes a &quot;previous result&quot; (the <code class="language-js">state</code>), and the &quot;current
      item&quot; (the
      <code class="language-js">action</code> object), decides a new state value based on those arguments, and returns
      that new state.
    </p>
    <p>If we were to create an array of Redux actions, call <code class="language-js">reduce()</code>, and pass in a
      reducer function,
      we&apos;d get a final result the same way:</p>
    <p>We can say that <strong>Redux reducers reduce a set of actions (over time) into a single state</strong>. The
      difference is that with <code class="language-js">Array.reduce()</code> it happens all at once, and with Redux, it
      happens over the
      lifetime of your running app.</p>
    <h4 class="mume-header" id="storestore-direct-link-to-heading">Store<a href="#store"
        title="Direct link to heading">#</a></h4>

    <p>The current Redux application state lives in an object called the <strong>store</strong> .</p>
    <p>The store is created by passing in a reducer, and has a method called <code class="language-js">getState</code>
      that returns the
      current state value:</p>
    <h4 class="mume-header" id="dispatchdispatch-direct-link-to-heading">Dispatch<a href="#dispatch"
        title="Direct link to heading">#</a></h4>

    <p>The Redux store has a method called <code class="language-js">dispatch</code>. <strong>The only way to update the
        state is to call
        <code class="language-js">store.dispatch()</code> and pass in an action object</strong>. The store will run its
      reducer function and
      save the new state value inside, and we can call <code class="language-js">getState()</code> to retrieve the
      updated value:</p>
    <p><strong>You can think of dispatching actions as &quot;triggering an event&quot;</strong> in the application.
      Something happened, and we want the store to know about it. Reducers act like event listeners, and when they hear
      an action they are interested in, they update the state in response.</p>
    <p>We typically call action creators to dispatch the right action:</p>
    <h4 class="mume-header" id="selectorsselectors-direct-link-to-heading">Selectors<a href="#selectors"
        title="Direct link to heading">#</a></h4>

    <p><strong>Selectors</strong> are functions that know how to extract specific pieces of information from a store
      state value. As an application grows bigger, this can help avoid repeating logic as different parts of the app
      need to read the same data:</p>
    <h3 class="mume-header" id="redux-application-data-flowredux-application-data-flow-direct-link-to-heading">Redux
      Application Data Flow<a href="#redux-application-data-flow" title="Direct link to heading">#</a></h3>

    <p>Earlier, we talked about &quot;one-way data flow&quot;, which describes this sequence of steps to update the app:
    </p>
    <ul>
      <li>State describes the condition of the app at a specific point in time</li>
      <li>The UI is rendered based on that state</li>
      <li>When something happens (such as a user clicking a button), the state is updated based on what occurred</li>
      <li>The UI re-renders based on the new state</li>
    </ul>
    <p>For Redux specifically, we can break these steps into more detail:</p>
    <ul>
      <li>Initial setup:
        <ul>
          <li>A Redux store is created using a root reducer function</li>
          <li>The store calls the root reducer once, and saves the return value as its initial <code
              class="language-js">state</code></li>
          <li>When the UI is first rendered, UI components access the current state of the Redux store, and use that
            data to decide what to render. They also subscribe to any future store updates so they can know if the state
            has changed.</li>
        </ul>
      </li>
      <li>Updates:
        <ul>
          <li>Something happens in the app, such as a user clicking a button</li>
          <li>The app code dispatches an action to the Redux store, like
            <code class="language-js">dispatch({type: &apos;counter/increment&apos;})</code>
          </li>
          <li>The store runs the reducer function again with the previous <code class="language-js">state</code> and the
            current
            <code class="language-js">action</code>, and saves the return value as the new <code
              class="language-js">state</code>
          </li>
          <li>The store notifies all parts of the UI that are subscribed that the store has been updated</li>
          <li>Each UI component that needs data from the store checks to see if the parts of the state they need have
            changed.</li>
          <li>Each component that sees its data has changed forces a re-render with the new data, so it can update
            what&apos;s shown on the screen</li>
        </ul>
      </li>
    </ul>
    <p>Here&apos;s what that data flow looks like visually:</p>
    <p><img src="https://redux.js.org/assets/images/ReduxDataFlowDiagram-49fa8c3968371d9ef6f2a1486bd40a26.gif"
        alt="Redux data flow diagram"></p>
    <h2 class="mume-header" id="what-youve-learnedwhat-youve-learned-direct-link-to-heading">What You&apos;ve Learned<a
        href="#what-youve-learned" title="Direct link to heading">#</a></h2>

    <p>Redux does have a number of new terms and concepts to remember. As a reminder, here&apos;s what we just covered:
    </p>
    <h5 class="mume-header" id="summary">Summary</h5>

    <ul>
      <li><strong>Redux is a library for managing global application state</strong>
        <ul>
          <li>Redux is typically used with the React-Redux library for integrating Redux and React together</li>
          <li>Redux Toolkit is the recommended way to write Redux logic</li>
        </ul>
      </li>
      <li><strong>Redux uses a &quot;one-way data flow&quot; app structure</strong>
        <ul>
          <li>State describes the condition of the app at a point in time, and UI renders based on that state</li>
          <li>When something happens in the app:
            <ul>
              <li>The UI dispatches an action</li>
              <li>The store runs the reducers, and the state is updated based on what occurred</li>
              <li>The store notifies the UI that the state has changed</li>
            </ul>
          </li>
          <li>The UI re-renders based on the new state</li>
        </ul>
      </li>
      <li><strong>Redux uses several types of code</strong>
        <ul>
          <li><em>Actions</em> are plain objects with a <code class="language-js">type</code> field, and describe
            &quot;what happened&quot;
            in the app</li>
          <li><em>Reducers</em> are functions that calculate a new state value based on previous state + an action</li>
          <li>A Redux <em>store</em> runs the root reducer whenever an action is <em>dispatched</em></li>
        </ul>
      </li>
    </ul>
    <h2 class="mume-header" id="whats-nextwhats-next-direct-link-to-heading">What&apos;s Next?<a href="#whats-next"
        title="Direct link to heading">#</a></h2>

    <p>We&apos;ve seen each of the individual pieces of a Redux app. Next, continue on to <a
        href="chrome-extension://cjedbglnccaioiolemnfhjncicchinao/tutorials/essentials/part-2-app-structure">Part 2:
        Redux App Structure</a>, where we&apos;ll look at a full working example to see how the pieces fit together.</p>
    <p></p>
    <hr>
    <hr>
    <h2 class="mume-header" id="when-to-use-redux">When to use Redux</h2>

    <p>Lately one of the biggest debates in the frontend world has been about Redux. Not long after its release, Redux
      became one of the hottest topics of discussion. Many favored it while others pointed out issues.</p>
    <p>Redux allows you to manage your app&#x2019;s state in a single place and keep changes in your app more
      predictable and traceable. It makes it easier to reason about changes occurring in your app. But all of these
      benefits come with tradeoffs and constraints. One might feel it adds up boilerplate code, making simple things a
      little overwhelming; but that depends upon the architecture decisions.</p>
    <p>One simple answer to this question is you will realize for yourself when you need Redux. If you&#x2019;re still
      confused as to whether you need it, you don&#x2019;t. This usually happens when your app grows to the scale where
      managing app state becomes a hassle; and you start looking out for making it easy and simple.</p>
    <h2 class="mume-header" id="what-is-state-management-in-redux">What is state management in Redux?</h2>

    <p>State management is essentially a way to facilitate communication and sharing of data across components. It
      creates a tangible data structure to represent the state of your app that you can read from and write to. That
      way, you can see otherwise invisible states while you&#x2019;re working with them.</p>
    <p>Most libraries, such as React, Angular, etc. are built with a way for components to internally manage their state
      without any need for an external library or tool. It does well for applications with few components, but as the
      application grows bigger, managing states shared across components becomes a chore.</p>
    <p>In an app where data is shared among components, it might be confusing to actually know where a state should
      live. Ideally, the data in a component should live in just one component, so sharing data among sibling components
      becomes difficult.</p>
    <p>For instance, in React, to share data among siblings, a state has to live in the parent component. A method for
      updating this state is provided by the parent component and passed as props to these sibling components.</p>
    <p>Here&#x2019;s a simple example of a login component in React. The input of the login component affects what is
      displayed by its sibling component, the status component:</p>
    <code class="language-js">
      <pre>
    class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { userStatus: "NOT LOGGED IN" };
    this.setStatus = this.setStatus.bind(this);
  }
  setStatus(username, password) {
    const newUsers = users;
    newUsers.map((user) => {
      if (user.username == username && user.password === password) {
        this.setState({
          userStatus: "LOGGED IN",
        });
      }
    });
  }
  render() {
    return (
      <div>
        <Status status={this.state.userStatus} />
        <Login handleSubmit={this.setStatus} />{" "}
      </div>
    );
  }
}

  </pre>
    </code>>
    <blockquote>
      <p><img src="https://s.w.org/images/core/emoji/13.0.1/svg/1f4a1.svg" alt="&#x1F4A1;"> Remember, this data is not
        needed by the parent component, but because its children need to share data, it has to provide a state.</p>
    </blockquote>
    <p>Now imagine what happens when a state has to be shared between components that are far apart in the component
      tree. The state has to be passed from one component to another until it gets to where it is needed.</p>
    <p>Basically, the state will have to be lifted up to the nearest parent component and to the next until it gets to
      an ancestor that is common to both components that need the state, and then it is passed down. This makes the
      state difficult to maintain and less predictable. It also means passing data to components that do not need it.
    </p>
    <p>It&#x2019;s clear that state management gets messy as the app gets complex. This is why you need a state
      management tool like Redux that makes it easier to maintain these states. Let&#x2019;s get a good overview of
      Redux concepts before considering its benefits.</p>
    <h2 class="mume-header" id="how-redux-works">How Redux works</h2>

    <p>The way Redux works is simple. There is a central store that holds the entire state of the application. Each
      component can access the stored state without having to send down props from one component to another.</p>
    <p>There are three building parts: actions, store, and reducers. Let&#x2019;s briefly discuss what each of them
      does. This is important because they help you understand the benefits of Redux and how it&#x2019;s to be used.
      We&#x2019;ll be implementing a similar example to the login component above but this time in Redux.</p>
    <h3 class="mume-header" id="actions-in-redux">Actions in&#xA0;Redux</h3>

    <p>Simply put, actions are events. They are the only way you can send data from your application to your Redux
      store. The data can be from user interactions, API calls, or even form submissions.</p>
    <p>Actions are sent using the <code class="language-js">store.dispatch()</code> method. Actions are plain JavaScript
      objects, and they
      must have a type property to indicate the type of action to be carried out. They must also have a payload that
      contains the information that should be worked on by the action. Actions are created via an action creator.</p>
    <p>Here&#x2019;s an example of an action that can be carried out during login in an app:</p>
    <p>{ type: &quot;LOGIN&quot;, payload: { username: &quot;foo&quot;, password: &quot;bar&quot; } }</p>
    <p>Here is an example of its action creator:</p>
    <p>const setLoginStatus = (name, password) =&gt; { return { type: &quot;LOGIN&quot;, payload: { username:
      &quot;foo&quot;, password: &quot;bar&quot; } } }</p>
    <p>As explained earlier, the action must contain the type property and then the other payload to be stored.</p>
    <h3 class="mume-header" id="reducers-in-redux">Reducers in&#xA0;Redux</h3>

    <p>Reducers are pure functions that take the current state of an application, perform an action, and return a new
      state. These states are stored as objects, and they specify how the state of an application changes in response
      to an action sent to the store.</p>
    <p>It is based on the <code class="language-js">reduce</code> function in JavaScript, where a single value is
      calculated from multiple
      values after a callback function has been carried out.</p>
    <p>Here is an example of how reducers work in Redux:</p>
    <p>const LoginComponent = (state = initialState, action) =&gt; { switch (action.type) { case &quot;LOGIN&quot;:
      return state.map(user =&gt; { if (user.username !== action.username) { return user; } if (user.password ==
      action.password) { return { ...user, login_status: &quot;LOGGED IN&quot; } } }); default: return state; } };</p>
    <blockquote>
      <p><img src="https://s.w.org/images/core/emoji/13.0.1/svg/1f4a1.svg" alt="&#x1F4A1;"> Reducers take the previous
        state of the app and return a new state based on the action passed to it.</p>
    </blockquote>
    <p>As pure functions, they do not change the data in the object passed to them or perform any side effect in the
      application. Given the same object, they should always produce the same result.</p>
    <h3 class="mume-header" id="store-in-redux">Store in&#xA0;Redux</h3>

    <p>The store holds the application state. It is highly recommended to keep only one store in any Redux
      application. You can access the state stored, update the state, and register or unregister listeners via helper
      methods.</p>
    <p>Let&#x2019;s create a store for our login app:</p>
    <p>const store = createStore(LoginComponent);</p>
    <p>Actions performed on the state always return a new state. Thus, the state is very easy and predictable.</p>
    <p>Now that we know a little more about Redux, let&#x2019;s go back to our login component example that was
      implemented earlier and see how Redux can improve the component.</p>
    <p>class App extends React.Component { render() { return ( </p>
    <div> &lt;Status user={<a href="http://this.props.user.name">this.props.user.name</a>}/&gt; &lt;Login
      login={this.props.setLoginStatus}/&gt; &lt;/div&gt; ) } }<p></p>
      <p>With Redux, there&#x2019;s one general state in the store, and each component has access to the state. This
        eliminates the need to continuously pass state from one component to another. You can also select the slice
        from the store for a particular component; this makes your app more optimized.</p>
      <h2 class="mume-header" id="redux-middleware">Redux middleware</h2>

      <p>Redux allows developers to intercept all actions dispatched from components before they are passed to the
        reducer function. This interception is done via middlewares.</p>
      <p>Building on the example Login component discussed in the last section, we might want to sanitize the
        user&#x2019;s input before it reaches our store for further processing. This can be achieved via <a
          href="https://redux.js.org/understanding/history-and-design/middleware">Redux middleware</a>.</p>
      <p>Technically, middlewares are functions that call the next method received in an argument after processing the
        current action. These are called after every dispatch.</p>
      <p>Here&#x2019;s what a simple middleware looks like:</p>
      <p>function simpleMiddleware({ getState, dispatch }) { return function(next){ return function(action){ const
        nextAction = next(action); const state = getState(); return nextAction; } } }</p>
      <p>This might look a little overwhelming, but in most cases, you might not need to create your own middleware
        since the huge Redux community has already made a number of them available. If you feel middleware is
        required, you will enjoy it because it gives you a lot of power to do tons of great work with the best
        abstraction.</p>
      <h2 class="mume-header" id="why-use-redux">Why use Redux?</h2>

      <p>When using Redux with React, states will no longer need to be lifted up. This makes it easier for you to
        trace which action causes any change.</p>
      <p>As you can see in the example above, the component does not need to provide any state or method for its
        children components to share data among themselves. Everything is handled by Redux. This greatly simplifies
        the app and makes it easier to maintain.</p>
      <p>This is the primary reason why you should use Redux, but it&#x2019;s not the only benefit. Take a look at the
        list below for a summary of what you stand to gain by using Redux for state management.</p>
      <h3 class="mume-header" id="redux-makes-the-state-predictable">Redux makes the state predictable</h3>

      <p>In Redux, the state is always predictable. If the same state and action are passed to a reducer, the same
        result is always produced because reducers are pure functions. The state is also immutable and is never
        changed. This makes it possible to implement arduous tasks like infinite undo and redo. It is also possible to
        implement time travel &#x2014; that is, the ability to move back and forth among the previous states and view
        the results in real time.</p>
      <h3 class="mume-header" id="redux-is-maintainable">Redux is maintainable</h3>

      <p>Redux is strict about how code should be organized, which makes it easier for someone with knowledge of Redux
        to understand the structure of any Redux application. This generally makes it easier to maintain. This also
        helps you segregate your business logic from your component tree. For large scale apps, it&#x2019;s critical
        to <a href="https://buttercms.com/blog/react-best-practices-maintaining-large-scale-projects">keep your app
          more predictable and maintainable.</a></p>
      <h3 class="mume-header" id="debugging-is-easy-in-redux">Debugging is easy in Redux</h3>

      <p>Redux makes it easy to debug an application. By logging actions and state, it is easy to understand coding
        errors, network errors, and other forms of bugs that might come up during production.</p>
      <p>Besides logging, it has <a
          href="https://blog.logrocket.com/redux-devtools-tips-tricks-for-faster-debugging/">great DevTools that allow
          you to time-travel actions</a>, persist actions on page refresh, etc. For medium- and large-scale apps,
        debugging takes more time then actually developing features. Redux DevTools makes it easy to taker advantage
        of all Redux has to offer.</p>
      <h3 class="mume-header" id="performance-benefits"><strong>Performance Benefits</strong></h3>

      <p>You might assume that keeping the app&#x2019;s state global would result in some performance degradation. To
        a large extent, that&#x2019;s not the case.</p>
      <p>React Redux implements many performance optimizations internally so that your own connected component only
        rerenders when it actually needs to.</p>
      <h3 class="mume-header" id="ease-of-testing">Ease of testing</h3>

      <p>It is easy to test Redux apps since functions used to change the state of pure functions.</p>
      <h3 class="mume-header" id="state-persistence">State persistence</h3>

      <p>You can persist some of the app&#x2019;s state to local storage and restore it after a refresh. This can be
        really nifty.</p>
      <h3 class="mume-header" id="server-side-rendering">Server-side rendering</h3>

      <p>Redux can also be used for server-side rendering. With it, you can handle the initial render of the app by
        sending the state of an app to the server along with its response to the server request. The required
        components are then rendered in HTML and sent to the clients.</p>
      <p>The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket
        logs all actions and state from your Redux stores.</p>
      <h2 class="mume-header" id="conclusion">Conclusion</h2>

      <p>We have discussed the major features of Redux and why Redux is beneficial to your app. While Redux has its
        benefits, that does not mean you should go about adding Redux in all of your apps. Your application <a
          href="https://blog.logrocket.com/when-and-when-not-to-use-redux-41807f29a7fb/">might still work well without
          Redux</a>.</p>
      <p>One major benefit of Redux is to add direction to decouple &#x201C;what happened&#x201D; from &#x201C;how
        things change.&#x201D; However, you should only implement Redux if you determine your project needs a state
        management tool.</p>
    </div>
  </div>
  </div>
  <div style="vertical-align:top;" class="md-sidebar-toc">
    <ul>
      <li><a
          href="#redux-libraries-learning-material-awesomehttpscdnrawgitcomsindresorhusawesomed7305f38d29fed78fa85652e3a63e154dd8e8829mediabadgesvghttpsgithubcomsindresorhusawesome">Redux
          Libraries &amp; Learning Material <img src="https://github.com/sindresorhus/awesome" alt="Awesome"></a><br>
        - <a href="#contents">Contents</a>
        <ul>
          <li><a href="#code-architecture">Code Architecture</a></li>
          <li><a href="#utilities">Utilities</a>
            <ul>
              <li><a href="#store-persistence">Store Persistence</a></li>
              <li><a href="#side-effects">Side Effects</a></li>
            </ul>
          </li>
          <li><a href="#code-style">Code Style</a></li>
          <li><a href="#dev-tools-inspection-tools">Dev tools / Inspection tools</a></li>
          <li><a href="#react-integration">React Integration</a>
            <ul>
              <li><a href="#routing">Routing</a></li>
              <li><a href="#forms">Forms</a></li>
              <li><a href="#component-state">Component State</a></li>
            </ul>
          </li>
          <li><a href="#other-integrations">Other Integrations</a>
            <ul>
              <li><a href="#flux">Flux</a></li>
              <li><a href="#backbone">Backbone</a></li>
              <li><a href="#falcor">Falcor</a></li>
              <li><a href="#rxjs">RxJS</a></li>
              <li><a href="#electron">Electron</a></li>
              <li><a href="#deku">Deku</a></li>
              <li><a href="#other">Other</a></li>
            </ul>
          </li>
          <li><a href="#boilerplate">Boilerplate</a></li>
          <li><a href="#miscellaneous">Miscellaneous</a></li>
          <li><a href="#learning-material">Learning Material</a></li>
          <li><a href="#community">Community</a></li>
        </ul>
      </li>
      <li><a href="#getting-started-with-react-redux-react-redux">Getting Started with React Redux | React Redux</a>
        <ul>
          <li><a href="#installationinstallation-direct-link-to-heading">Installation#</a>
            <ul>
              <li><a href="#using-create-react-appusing-create-react-app-direct-link-to-heading">Using Create React
                  App#</a></li>
              <li><a href="#an-existing-react-appan-existing-react-app-direct-link-to-heading">An Existing React
                  App#</a></li>
            </ul>
          </li>
          <li><a href="#api-overviewapi-overview-direct-link-to-heading">API Overview#</a>
            <ul>
              <li><a href="#providerprovider-direct-link-to-heading"><code class="language-js">Provider</code>#</a></li>
              <li><a href="#hookshooks-direct-link-to-heading">Hooks#</a></li>
            </ul>
          </li>
          <li><a href="#learning-react-reduxlearning-react-redux-direct-link-to-heading">Learning React Redux#</a>
            <ul>
              <li><a href="#learn-modern-redux-livestreamlearn-modern-redux-livestream-direct-link-to-heading">Learn
                  Modern Redux Livestream#</a></li>
            </ul>
          </li>
          <li><a href="#help-and-discussionhelp-and-discussion-direct-link-to-heading">Help and Discussion#</a></li>
          <li><a href="#docs-translationsdocs-translations-direct-link-to-heading">Docs Translations#</a></li>
          <li><a href="#introductionintroduction-direct-link-to-heading">Introduction</a>
            <ul>
              <li><a href="#how-to-read-this-tutorialhow-to-read-this-tutorial-direct-link-to-heading">How to Read This
                  Tutorial</a></li>
            </ul>
          </li>
          <li><a href="#what-is-reduxwhat-is-redux-direct-link-to-heading">What is Redux?</a>
            <ul>
              <li><a href="#why-should-i-use-reduxwhy-should-i-use-redux-direct-link-to-heading">Why Should I Use
                  Redux?#</a></li>
              <li><a href="#when-should-i-use-reduxwhen-should-i-use-redux-direct-link-to-heading">When Should I Use
                  Redux?#</a></li>
              <li><a href="#redux-libraries-and-toolsredux-libraries-and-tools-direct-link-to-heading">Redux Libraries
                  and Tools#</a>
                <ul>
                  <li><a href="#react-reduxreact-redux-direct-link-to-heading">React-Redux#</a></li>
                  <li><a href="#redux-toolkitredux-toolkit-direct-link-to-heading">Redux Toolkit#</a></li>
                  <li><a href="#redux-devtools-extensionredux-devtools-extension-direct-link-to-heading">Redux DevTools
                      Extension#</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#redux-terms-and-conceptsredux-terms-and-concepts-direct-link-to-heading">Redux Terms and
              Concepts#</a>
            <ul>
              <li><a href="#state-managementstate-management-direct-link-to-heading">State Management#</a></li>
              <li><a href="#immutabilityimmutability-direct-link-to-heading">Immutability#</a></li>
              <li><a href="#terminologyterminology-direct-link-to-heading">Terminology#</a>
                <ul>
                  <li><a href="#actionsactions-direct-link-to-heading">Actions#</a></li>
                  <li><a href="#action-creatorsaction-creators-direct-link-to-heading">Action Creators#</a></li>
                  <li><a href="#reducersreducers-direct-link-to-heading">Reducers#</a>
                    <ul>
                      <li><a href="#info">info</a></li>
                    </ul>
                  </li>
                  <li><a href="#detailed-explanation-why-are-they-called-reducers">Detailed Explanation: Why Are They
                      Called &apos;Reducers?&apos;</a></li>
                  <li><a href="#storestore-direct-link-to-heading">Store#</a></li>
                  <li><a href="#dispatchdispatch-direct-link-to-heading">Dispatch#</a></li>
                  <li><a href="#selectorsselectors-direct-link-to-heading">Selectors#</a></li>
                </ul>
              </li>
              <li><a href="#redux-application-data-flowredux-application-data-flow-direct-link-to-heading">Redux
                  Application Data Flow#</a></li>
            </ul>
            
          </li>
          <li><a href="#what-youve-learnedwhat-youve-learned-direct-link-to-heading">What You&apos;ve Learned#</a><br>
            - <a href="#summary">Summary</a></li>
          <li><a href="#whats-nextwhats-next-direct-link-to-heading">What&apos;s Next?#</a></li>
          <li><a href="#when-to-use-redux">When to use Redux</a></li>
          <li><a href="#what-is-state-management-in-redux">What is state management in Redux?</a></li>
          <li><a href="#how-redux-works">How Redux works</a>
            <ul>
              <li><a href="#actions-in-redux">Actions in&#xA0;Redux</a></li>
              <li><a href="#reducers-in-redux">Reducers in&#xA0;Redux</a></li>
              <li><a href="#store-in-redux">Store in&#xA0;Redux</a></li>
            </ul>
          </li>
          <li><a href="#redux-middleware">Redux middleware</a></li>
          <li><a href="#why-use-redux">Why use Redux?</a>
            <ul>
              <li><a href="#redux-makes-the-state-predictable">Redux makes the state predictable</a></li>
              <li><a href="#redux-is-maintainable">Redux is maintainable</a></li>
              <li><a href="#debugging-is-easy-in-redux">Debugging is easy in Redux</a></li>
              <li><a href="#performance-benefits"><strong>Performance Benefits</strong></a></li>
              <li><a href="#ease-of-testing">Ease of testing</a></li>
              <li><a href="#state-persistence">State persistence</a></li>
              <li><a href="#server-side-rendering">Server-side rendering</a></li>
            </ul>
          </li>
          <li><a href="#conclusion">Conclusion</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <br>
  <br>
  <script async src="./index.js"></script>
  <a class="bookmarklet_button" href="javascript:(function(){%20f='https://www.addtoany.com/share#url='+encodeURIComponent(window.location.href)+'&amp;title='+encodeURIComponent(document.title);%20a=function(){%20if(!window.open(f,'addtoany','width=800,height=600,toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes')){%20location.href=f+'jump=yes';%20};%20if(/Firefox/.test(navigator.userAgent)){%20setTimeout(a,0)%20}%20else{%20a()%20}%20})()"
    title="AddToAny"
    onclick="alert('Drag this link onto your toolbar to add the AddToAny Bookmarklet'); return false">Drag to
    Bookmarks to add to Bookmarks!</a>

  <br>
  <br>

  <div class="a2a_kit a2a_default_style">
    <a class="a2a_button_facebook_like"></a>
  </div>
  <br>
  <br> <br>
  <br>

  <a id="sidebar-toc-btn">&#x2261;</a>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>

  <!-- Go to www.addthis.com/dashboard to customize your tools -->
  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-60c2b471a965f596"></script>

<script async defer src="./toc.js"></script>


  <!-- Go to www.addthis.com/dashboard to customize your tools -->
  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-60c2b471a965f596"></script>

  <!-- Go to www.addthis.com/dashboard to customize your tools -->
  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-60c2b471a965f596"></script>

  <!-- Go to www.addthis.com/dashboard to customize your tools -->
  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-60c2b471a965f596"></script>

</body>

</html>