title: View not showing just updated state in Redux
body: <p>I am using Redux to manage the state however, I need help on moving forward.
  Here's the logic. I am loading the prices of products from the state(allProducts) into a form. A user can edit any or all of those prices and when such edit occurs, updatePrice action fires and it stores the products and their prices into a updatedProducts state. When I logged updatedProducts to even see the new changes, it returns empty [] the first time. However, subsequent changes showed the updated state
  Can anyone please help with a fix?</p>
  <p>Action:</p>
  <pre><code>import { UPDATE_PRICE, VIEW_ALL_PRODUCTS } from &quot;./types&quot;;
  import { productNet } from &quot;../../../../utils/urls&quot;;
   
  
  export const updatePrice = (price, id, allProducts) =&gt; dispatch =&gt; {
    const newArray = [...allProducts];
    newArray[id].price = price; //changing value in the new array
        dispatch({
          type: UPDATE_PRICE,
          updated_products: newArray,
        });
  };
  
  export const getAllProducts = () =&gt; async (dispatch) =&gt; {
      productNet
        .get(&quot;products/&quot;)
        .then((response) =&gt; {
            const { data } = response.data
           dispatch({
            type: VIEW_ALL_PRODUCTS,
            all_products: data,
          });
        })
        .catch((error) =&gt; {
          return;
        });
  };
  </code></pre>
  <p>Reducer:</p>
  <pre><code>import { UPDATE_PRICE, VIEW_ALL_PRODUCTS } from &quot;../actions/types&quot;;
  
  const initial_state = {
    allProducts: [],
    updatedProducts: [],
    priceChange: false,
  };
  
  const AdminPricingReducer = (state = initial_state, action) =&gt; {
    const { type, updated_products, all_products} = action;
    switch (type) {
      case VIEW_ALL_PRODUCTS: {
        return { ...state, allProducts: all_products};
      }
      case UPDATE_PRICE: {
        return { ...state, updatedProducts: updated_products };
      }
      default:
        return state;
    }
  };
  
  export default AdminPricingReducer;
  </code></pre>
  <p>Component:</p>
  <pre><code>import React, { useState, useEffect, useRef } from &quot;react&quot;;
  import { useDispatch, useSelector } from &quot;react-redux&quot;;
  import { connect } from &quot;react-redux&quot;;
  import { updatePrice, getAllProducts } from &quot;./actions/AdminPricingAction&quot;;
  const Pricing = ({
    updatePrice,
    getAllProducts,
    allProducts,
    updatedProducts,
    initial_products,
  }) =&gt; {
    let targetElem = &quot;&quot;;
    let targetDiv = &quot;&quot;;
    const inputRefs = useRef([]);
    const editedRefs = useRef([]);
    useEffect(() =&gt; {
      getAllProducts();
    }, []);
    const handleDecrease = (index, prevPrice) =&gt; {
      let newPrice = prevPrice - 1;
      updatePrice(newPrice, index, allProducts);
    };
  
    const handleIncrease = (index, prevPrice) =&gt; {
      let newPrice = prevPrice + 1;
      updatePrice(newPrice, index, allProducts);
    };
  
    const updatePriceByTyping = (newPrice, index) =&gt; {
      updatePrice(newPrice, index, allProducts);
    };
    const showEdited = (targetDiv, i) =&gt; {
      console.log(updatedProducts); //this returned [] the first time
    };
    const handleKeyUp = (targetElem) =&gt; {
      if (targetElem) targetElem.focus();
    };
  
    return (
      &lt;&gt;
        {allProducts.length !== 0 &amp;&amp;
          allProducts.map((product, index) =&gt; (
            &lt;div className=&quot;flex border-b p-6 space-between&quot; key={index}&gt;
              &lt;div
                className=&quot;flex justify-between items-center w-1/2 px-4&quot;
                key={index}
              &gt;
                &lt;div className=&quot;flex gap-4&quot;&gt;
                  &lt;img
                    className=&quot;h-20 w-10 rounded-full&quot;
                    src={product.imageUrl}
                    style={{ objectFit: &quot;cover&quot; }}
                    alt=&quot;&quot;
                  /&gt;
                  &lt;div&gt;
                    &lt;div className=&quot;text-base my-1 font-semibold mb-3&quot;&gt;
                      {product.sku} {product.volume}
                    &lt;/div&gt;
                    &lt;div className=&quot;flex gap-2 items-center&quot;&gt;
                      &lt;div className=&quot;font-customGilroy text-sm font-medium text-center align-middle text-white&quot;&gt;
                        &lt;button
                          className=&quot;rounded-full py-1 px-3&quot;
                          style={{ backgroundColor: &quot;#F49C00&quot; }}
                        &gt;
                          {product.productType}
                        &lt;/button&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className=&quot;flex gap-1&quot;&gt;
                  &lt;button
                    className=&quot;w-6 h-6 rounded text-red-main font-bold bg-gray-200&quot;
                    onClick={() =&gt; handleDecrease(index, product.price)}
                  &gt;
                    -
                  &lt;/button&gt;
                  &lt;input
                    key={index}
                    id={product.id}
                    value={product.price}
                    onChange={(e) =&gt; {
                      updatePriceByTyping(e.target.value, index);
                      targetDiv = editedRefs.current[index];
                      showEdited(targetDiv, index);
                    }}
                    onKeyUp={(e) =&gt; {
                      switch (e.key) {
                        case &quot;ArrowDown&quot;:
                          targetElem =
                            inputRefs.current[
                              index === allProducts.length - 1 ? 0 : index + 1
                            ];
  
                          break;
                        case &quot;ArrowUp&quot;:
                          targetElem =
                            inputRefs.current[
                              index === allProducts.length + 1 ? 0 : index - 1
                            ];
  
                          break;
                        default:
                          return &quot;&quot;;
                      }
                      handleKeyUp(targetElem);
                    }}
                    ref={(el) =&gt; (inputRefs.current[index] = el)}
                    className=&quot;w-16 h-6 rounded border border-gray-300 font-customGilroy font-semibold text-grey-100 text-center not-italic text-sm py-1 px-2.5&quot;
                  /&gt;
  
                  &lt;button
                    className=&quot;w-6 h-6 rounded text-red-main font-bold bg-gray-200&quot;
                    onClick={() =&gt; handleIncrease(index, product.price)}
                  &gt;
                    +
                  &lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div
                key={product.id}
                id={index}
                ref={(el) =&gt; (editedRefs.current[index] = el)}
                className=&quot;flex items-center w-1/2 px-4 invisible&quot;
                style={{ justifyContent: &quot;flex-end&quot; }}
              &gt;
                &lt;button
                  className=&quot;rounded-full py-1 px-3&quot;
                  style={{
                    backgroundColor: &quot;#74767E&quot;,
                    color: &quot;#FFFFFF&quot;,
                    fontSize: 14,
                    marginRight: 10,
                  }}
                &gt;
                  Edited
                &lt;/button&gt;
                &lt;ArrowEdit /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          ))}
      &lt;/&gt;
    );
  };
  
  const mapStateToProps = (state) =&gt; {
    console.log(state.PricingReducer.updatedProducts); //This logs once i make a change
    return {
      allProducts: state.PricingReducer.allProducts,
      updatedProducts: state.PricingReducer.updatedProducts,
    };
  };
  
  export default connect(mapStateToProps, {
    updatePrice,
    getAllProducts,
  })(Pricing);
  </code></pre>