I am facing an issue with Firebase Database returning timestamps and unable to render them into components using Redux.
How can I resolve this error and convert the timestamp to a date or vice versa?
I need help with valid type conversion methods.
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { Timestamp } from 'firebase/firestore';
interface Order {
dateTime: Date;
items: {
item: {
id: string;
image: [];
name: string;
price: number;
rating: number;
uid: string;
};
quantity: number;
}[];
shopId: string;
shopName: string;
status: string;
uid: string;
userEmail: string;
}
interface DataState {
orders: Order[];
}
const initialState: DataState = {
orders: [],
};
const convertTimestampToDate = (timestamp: any) => {
const data = timestamp.toDate().toLocaleTimeString('en-US')
return data
};
export const OrdersSlice = createSlice({
name: 'OrderState',
initialState,
reducers: {
setOrders: (state, action: PayloadAction<Order[]>) => {
state.orders = action.payload.map(order => ({
...order,
dateTime: convertTimestampToDate(order.dateTime),
}));
},
},
});
export const { setOrders } = OrdersSlice.actions;
export default OrdersSlice.reducer;
I encountered the following error:
Authenticated.tsx:106 A non-serializable value was detected in an action, in the path: payload.0.dateTime. Value:
Timestamp {seconds: 1714486856, nanoseconds: 18560000}
Please review the logic that dispatched this action:
{type: 'OrderState/setOrders', payload: Array(1)}
(See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants) (To allow non-serializable values see: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data)