title: useReducer: dispatch action, show state in other component and update state when action is dispatched
body: <p>I have a problem which I can't figure it out. I'm building an ecommerce react app and using <code>useReducer</code> and <code>useContext</code> for state management. Client opens a product, picks number of items and then click button &quot;Add to Cart&quot; which dispatches an action. This part is working well, and the problem starts. I don't know how to show and update in <code>Navbar.js</code> component a total number of products in cart. It is showing after route changes, but I want it to update when clicking Add to Cart button. I tried useEffect but it doesn't work.</p>
  <p>initial state looks like this</p>
  <pre><code>const initialState = [
    {
      productName: '',
      count: 0
    }
  ]
  </code></pre>
  <p>AddToCart.js works good</p>
  <pre><code>import React, { useState, useContext } from 'react'
  import { ItemCounterContext } from '../../App'
  
  function AddToCart({ product }) {
    const itemCounter = useContext(ItemCounterContext)
    const [countItem, setCountItem] = useState(0)
  
    const changeCount = (e) =&gt; {
      if (e === '+') { setCountItem(countItem + 1) }
      if (e === '-' &amp;&amp; countItem &gt; 0) { setCountItem(countItem - 1) }
    }
  
    return (
      &lt;div className='add margin-top-small'&gt;
        &lt;div
          className='add-counter'
          onClick={(e) =&gt; changeCount(e.target.innerText)}
          role='button'
        &gt;
          -
        &lt;/div&gt;
  
        &lt;div className='add-counter'&gt;{countItem}&lt;/div&gt;
  
        &lt;div
          className='add-counter'
          onClick={(e) =&gt; changeCount(e.target.innerText)}
          role='button'
        &gt;
          +
        &lt;/div&gt;
        &lt;button
          className='add-btn btnOrange'
          onClick={() =&gt; itemCounter.dispatch({ type: 'addToCart', productName: product.name, count: countItem })}
        &gt;
          Add to Cart
        &lt;/button&gt;
      &lt;/div&gt;
    )
  }
  
  export default AddToCart
  </code></pre>
  <p>Navbar.js is where I have a problem</p>
  <pre><code>import React, { useContext } from 'react'
  import { Link, useLocation } from 'react-router-dom'
  import NavList from './NavList'
  import { StoreContext, ItemCounterContext } from '../../App'
  import Logo from '../Logo/Logo'
  
  function Navbar() {
    const store = useContext(StoreContext)
    const itemCounter = useContext(ItemCounterContext)
    const cartIcon = store[6].cart.desktop
    const location = useLocation()
    const path = location.pathname
  
    const itemsSum = itemCounter.state
      .map((item) =&gt; item.count)
      .reduce((prev, curr) =&gt; prev + curr, 0)
  
    const totalItemsInCart = (
      &lt;span className='navbar__elements-sum'&gt;
        {itemsSum}
      &lt;/span&gt;
    )
  
    return (
      &lt;div className={`navbar ${path === '/' ? 'navTransparent' : 'navBlack'}`}&gt;
        &lt;nav className='navbar__elements'&gt;
          &lt;Logo /&gt;
          &lt;NavList /&gt;
          &lt;Link className='link' to='/cart'&gt;
            &lt;img className='navbar__elements-cart' src={cartIcon} alt='AUDIOPHILE CART ICON' /&gt;
            {itemsSum &gt; 0 ? totalItemsInCart : null}
          &lt;/Link&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    )
  }
  
  export default Navbar
  </code></pre>