title: React useSelector first time returns undefined, then everything works fine
body: <p>so I'm making a mini eCommerce app using MERN stack, i'm fetching products for each seller using his id, so he's the only one who can edit or delete his own products,</p>
  <p>in my component i get the user's id from redux state from the user, then i use the id to fetch products for each logged in seller.(in useEffect)
  so fetching products depends on the user, and the user is always loaded and no need to fetch it after he login.</p>
  <p>the problem is, only the first time after i login and i render the component it gives me
  TypeError: products.map is not a function. but if i refresh the page it works fine
  so it doesn't see products the first time idk why even if the user is there and the id to fireup the fetching function.</p>
  <pre><code>function EditProducts() {
    const { user } = useSelector(state =&gt; state.userrr);
    const { loading, products } = useSelector(state =&gt; state.userProductsss);
  
    const dispatch = useDispatch();
  
    useEffect(() =&gt; {
      console.log(user);
      console.log(products);
  
      if (!user) {
        return;
      } else {
        let id = user._id;
        dispatch(fetchUserProducts(id));
      }
    }, [dispatch, user]);
  
    const deleteIt = id =&gt; {
      dispatch(deleteProduct(id))
        .then(res =&gt; {
          toast.success(res, { position: toast.POSITION.BOTTOM_LEFT });
        })
        .catch(error =&gt; {
          toast.error(error, {
            position: toast.POSITION.BOTTOM_LEFT,
            autoClose: false
          });
        });
    };
    console.log(products);
    return (
      &lt;Container&gt;
        &lt;Table striped bordered hover variant='dark'&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;category&lt;/th&gt;
              &lt;th&gt;Description&lt;/th&gt;
              &lt;th&gt;Price&lt;/th&gt;
              &lt;th&gt;Edit&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            {loading &amp;&amp; (
              &lt;tr&gt;
                &lt;td colSpan='4'&gt;
                  &lt;Spinner animation='border' /&gt; loading...{&quot; &quot;}
                &lt;/td&gt;
              &lt;/tr&gt;
            )}
  
            {!user &amp;&amp; !loading &amp;&amp; (
              &lt;tr&gt;
                &lt;td colSpan='4'&gt;Please Log in to access this page&lt;/td&gt;
              &lt;/tr&gt;
            )}
            {products.map(product =&gt; (
              &lt;tr key={product._id}&gt;
                &lt;td&gt;{product.name}&lt;/td&gt;
                &lt;td&gt;{product.description}&lt;/td&gt;
                &lt;td&gt;${product.price}&lt;/td&gt;
                &lt;td&gt;
                  &lt;span className='btn btn-primary mr-3'&gt;
                    &lt;UpdateProductForm
                      id={product._id}
                      name={product.name}
                      description={product.description}
                      category={product.category}
                      price={product.price}
                      numberInStock={product.numberInStock}
                      productImage={product.productImage}
                    /&gt;
                  &lt;/span&gt;
                  &lt;Button className='btn btn-danger' onClick={() =&gt; deleteIt(product._id)}&gt;
                    &lt;FontAwesomeIcon icon={faTrash} /&gt;
                  &lt;/Button&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            ))}
          &lt;/tbody&gt;
        &lt;/Table&gt;
      &lt;/Container&gt;
    );
  }
  
  export default EditProducts;
  </code></pre>
  <p>this is my reducer</p>
  <pre><code>const productReducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case FETCH_USER_PRODUCTS_STARTED:
        return {
          ...state,
          loading: true
        };
      case FETCH_USER_PRODUCTS_SUCCESS:
        return {
          ...state,
          loading: false,
          error: null,
          products: action.payload.products
        };
      case FETCH_USER_PRODUCTS_FAILURE:
        return {
          ...state,
          loading: false,
          error: action.payload.error,
          success: null
        };
    default:
      return state;
  }
  };
  </code></pre>
  <p>this is the actions</p>
  <pre><code>export const fetchUserProducts = userId =&gt; {
    return dispatch =&gt; {
      dispatch(fetchUserProductsStarted());
  
      axios
        .get(`/api/product/${userId}/products`)
        .then(res =&gt; {
          dispatch(fetchUserProductsSuccess(res.data));
        })
        .catch(error =&gt; {
          dispatch(fetchUserProductsFailure(error.message));
        });
    };
  };
  
  const fetchUserProductsStarted = () =&gt; {
    return {
      type: FETCH_USER_PRODUCTS_STARTED
    };
  };
  
  const fetchUserProductsSuccess = products =&gt; {
    return {
      type: FETCH_USER_PRODUCTS_SUCCESS,
      payload: {
        products
      }
    };
  };
  
  const fetchUserProductsFailure = error =&gt; {
    return {
      type: FETCH_USER_PRODUCTS_FAILURE,
      payload: {
        error
      }
    };
  };
  </code></pre>