useEffect is not trigggering

Question

I am trying to fetch some data from api using redux for state management . I tried to dispatch the action from inside the useEffect but it does not work at all . I think there is some issue in dependencies but i cannot figure it out. I got the following error:

Cannot read properties of undefined (reading 'shippingAddress')

orderReducer.js

export const orderDetailsReducer = (
  state = { loading: true, orderItems: [], shippingAddress: {} },
  action
) => {
  switch (action.type) {
    case ORDER_DETAILS_REQUEST:
      return { loading: true };
    case ORDER_DETAILS_SUCCESS:
      return { loading: false, order: action.payload };
    case ORDER_DETAILS_FAIL:
      return { loading: false, error: action.payload };
    default:
      return state;
  }
};

orderAction.js

export const getOrderDetails = (id) => async (dispatch, getState) => {
  try {
    dispatch({
      type: ORDER_DETAILS_REQUEST,
    });

    const {
      loginuser: { userInfo },
    } = getState();

    const sdata = {
      headers: {
        "Content-type": "application/json",
        Authorization: `Bearer ${userInfo.token}`,
      },
    };

    const { data } = await axios.get(`/api/orders/${id}/`, sdata);
    console.log("incoming data", data);
    dispatch({
      type: ORDER_DETAILS_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: ORDER_DETAILS_FAIL,
      payload:
        error.response && error.response.data.detail
          ? error.response.data.detail
          : error.message,
    });
  }
};

store.js

import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import { productListReducer } from "./reducers/productReducers";
import { productDetailsReducer } from "./reducers/productReducers";
import { cartItemReducer } from "./reducers/cartReducers";
import {
  userLoginReducer,
  userRegisterReducer,
  userDetailReducer,
  useUpdateReducer,
} from "./reducers/userReducers";
import {
  orderAddItemReducer,
  orderDetailsReducer,
  orderPayReducer,
} from "./reducers/orderReducers";

const reducer = combineReducers({
  productList: productListReducer,
  productDetails: productDetailsReducer,
  cart: cartItemReducer,
  loginuser: userLoginReducer,
  registeruser: userRegisterReducer,
  userDetails: userDetailReducer,
  userUpdate: useUpdateReducer,
  orderAddItem: orderAddItemReducer,
  orderDetails: orderDetailsReducer,
  orderPay: orderPayReducer,
});

const cartItemsInStorage = localStorage.getItem("cartItems")
  ? JSON.parse(localStorage.getItem("cartItems"))
  : [];

const userInfoInStorage = localStorage.getItem("userInfo")
  ? JSON.parse(localStorage.getItem("userInfo"))
  : null;

const shippingAddressInStorage = localStorage.getItem("shippingAddress")
  ? JSON.parse(localStorage.getItem("shippingAddress"))
  : {};

console.log("itemsinstorage: ", cartItemsInStorage);
const initialState = {
  cart: {
    cartItems: cartItemsInStorage,
    shippingAddress: shippingAddressInStorage,
  },
  loginuser: { userInfo: userInfoInStorage },
};
const middleware = [thunk];
const store = createStore(
  reducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

OrderDetails.js

import React, { useEffect, useState } from "react";
import { getOrderDetails, payOrder } from "../actions/orderAction";
import { useNavigate, useParams } from "react-router";
import { useDispatch, useSelector } from "react-redux";
import { PayPalButtons } from "@paypal/react-paypal-js";
function OrderDetails() {
  const { id } = useParams();
  const dispatch = useDispatch();
  const orderDetails = useSelector((state) => state.orderDetails);
  const { order, error, loading } = orderDetails;

  const orderPay = useSelector((state) => state.orderPay);
  const { loading: loadingPay, success: successPay } = orderPay;

  const { userInfo } = useSelector((state) => state.loginuser);

  useEffect(() => {
    if (!order) {
      dispatch(getOrderDetails(id));
    }
  }, [id, order, dispatch]);

  return (
    <>
      
        
          
            
              
                shipping
                
                  Address : {order.shippingAddress.address} ,{" "}
                  {order.shippingAddress.city} ,{" "}
                  {order.shippingAddress.postalcode} ,
                  {order.shippingAddress.country}{" "}
                
              
              
                Payment Method
                {order.paymentMethos} 
              
              
                ordered items
                
                  {order.orderItems.map((item) => (
                    
                      
                        
                          
                        
                        
                          {item.name}
                        
                        
                          
                            {" "}
                            {item.qty} x {item.price}
                          
                        
                      
                    
                  ))}
                
              
            
          

          
            
              
                PRICE SUMMARY
              
              
                
                  item 
                  {order.itemsprice}
                
              
              
                
                  shipping
                  {order.shippingprice}
                
              
              
                
                  tax 
                  {order.taxprice} 
                
              
              
                
                  total 
                  {order.totalprice} 
                
              
            
          
        
      
    
  );
}

export default OrderDetails;

useEffect is not trigggering

Answers (1)

Related Questions