I was following this guide https://youtu.be/hpgh2BTtac8?si=X6rZX3tMHl8yBgh4&t=52686 and on My orders page i have an error, orders dont loading. Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘message’). Im new at learning JavaScript and reduxjs and want ask for help. My code:
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { fetchUserOrders } from "../redux/slices/orderSlice";
const dispatch = useDispatch();
const navigate = useNavigate();
const { orders, loading, error } = useSelector((state) => state.orders);
useEffect(() => {
dispatch(fetchUserOrders());
}, [dispatch]);
const handleRowClick = (orderId) => {
navigate(`/order/${orderId}`);
};
if (loading) return <p>Loading ...</p>;
if (error) return <p>Error: {error}</p>;
orderSlice
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
export const fetchUserOrders = createAsyncThunk(
"orders/fetchUserOrders",
async (_, { rejectWithValue }) => {
try {
const response = await axios.get(
`${import.meta.env.VITE_BACKEND.URL}/api/orders/my-orders`,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("userToken")}`,
},
}
);
return response.data;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
export const fetchOrderDetails = createAsyncThunk(
"orders/fetchOrderDetails",
async (fetchOrderDetails, { rejectWithValue }) => {
try {
const response = await axios.get(
`${import.meta.env.VITE_BACKEND.URL}/api/orders/${orderId}`,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("userToken")}`,
},
}
);
return response.data;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
const orderSlice = createSlice({
name: "orders",
initialState: {
orders: [],
totalOrders: 0,
orderDetails: null,
loading: false,
error: null,
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchUserOrders.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(fetchUserOrders.fulfilled, (state, action) => {
state.loading = false;
state.orders = action.payload;
})
.addCase(fetchUserOrders.rejected, (state, action) => {
state.loading = false;
console.log(action);
state.error = action.payload.message;
})
.addCase(fetchOrderDetails.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(fetchOrderDetails.fulfilled, (state, action) => {
state.loading = false;
state.orderDetails = action.payload;
})
.addCase(fetchOrderDetails.rejected, (state, action) => {
state.loading = false;
state.error = action.payload.message;
});
},
});
export default orderSlice.reducer;
Backend
const orderItemSchema = new mongoose.Schema(
{
productId: {
type: mongoose.Schema.Types.ObjectId,
ref: "Product",
required: true,
},
name: {
type: String,
required: true,
},
image: {
type: String,
required: true,
},
price: {
type: Number,
required: true,
},
size: String,
color: String,
quantity: {
type: Number,
required: true,
},
},
{ _id: false }
);
const orderSchema = new mongoose.Schema(
{
user: {
type: mongoose.Schema.Types.ObjectId,
ref: "User",
required: true,
},
orderItems: [orderItemSchema],
shippingAddress: {
address: { type: String, required: true },
city: { type: String, required: true },
postalCode: { type: String, required: true },
country: { type: String, required: true },
},
paymentMethod: {
type: String,
required: true,
},
totalPrice: {
type: Number,
required: true,
},
isPaid: {
type: Boolean,
default: false,
},
paidAt: {
type: Date,
},
isDelivered: {
type: Boolean,
default: false,
},
deliveredAt: {
type: Date,
},
paymentStatus: {
type: String,
default: "pending",
},
status: {
type: String,
enum: ["Processing", "Shipped", "Delivered", "Cancelled"],
default: "Processing",
},
},
{ timestamps: true }
);
module.exports = mongoose.model("Order", orderSchema);
orderRoutes
const express = require("express");
const Order = require("../models/Order");
const { protect } = require("../middleware/authMiddleware");
const router = express.Router();
router.get("/my-orders", protect, async (req, res) => {
try {
const orders = await Order.find({ user: req.user._id }).sort({
createdAt: -1,
});
res.json(orders);
} catch (error) {
console.error(error);
res.status(500).json({ message: "Server error" });
}
});
router.get("/:id", protect, async (req, res) => {
try {
const order = await Order.findById(req.params.id).populate(
"user",
"name email"
);
if (!order) {
return res.status(404).json({ message: "Order not found" });
}
res.json(order);
} catch (error) {
console.error(error);
res.status(500).json({ message: "Server error" });
}
});
module.exports = router;
Backend works perfectly I checked through Postman.
I also debugged the action with console.log(action) and it gives this error
{type: ‘orders/fetchUserOrders/rejected’, payload: undefined, meta: {…}, error: {…}}
Looks like the problem is that payload is undefined, but i cant find an issue. Will be glad for any help
