title: TypeError: Cannot destructure property 'loading' of 'orderPay' as it is undefined
body: <p>I'm creating node/react web shop and i have problem with this:</p>
  <pre><code>     const orderPay = useSelector((state) =&gt; state.orderPay);
       const {
          loading: loadingPay,
          error: errorPay,
          success: successPay,
      } = orderPay;
  </code></pre>
  <p>where the error is:</p>
  <pre><code>TypeError: Cannot destructure property 'loading' of 'orderPay' as it is undefined.
  </code></pre>
  <p>i'm sure this is correct way to destructure</p>
  <p>order actions:</p>
  <pre><code>export const payOrder = (order, paymentResult) =&gt; async (
  dispatch,
  getState
  ) =&gt; {
  dispatch({ type: ORDER_PAY_REQUEST, payload: { order, paymentResult } });
  const {
   userSignin: { userInfo },
  } = getState();
  try {
  const { data } = Axios.put(`/api/orders/${order._id}/pay`, paymentResult, {
    headers: { Authorization: `Bearer ${userInfo.token}` },
  });
  dispatch({ type: ORDER_PAY_SUCCESS, payload: data });
  } catch (error) {
  const message =
    error.response &amp;&amp; error.response.data.message
      ? error.response.data.message
      : error.message;
  dispatch({ type: ORDER_PAY_FAIL, payload: message });
   }
  };
  </code></pre>
  <p>now reducer part is:</p>
  <pre><code>  export const orderPayReducer = (state = {}, action) =&gt; {
  switch (action.type) {
    case ORDER_PAY_REQUEST:
      return { loading: true };
    case ORDER_PAY_SUCCESS:
      return { loading: false, success: true };
    case ORDER_PAY_FAIL:
      return { loading: false, error: action.payload };
    case ORDER_PAY_RESET:
      return {};
    default:
      return state;
    }
  };
  </code></pre>
  <p>i read similar questions with but they arent helping me</p>