Error message: The Luxon DateTime was not recognized as a valid Luxon DateTime object

Question

Error message: The Luxon DateTime was not recognized as a valid Luxon DateTime object

I'm having trouble understanding the workings of Luxon... I'm using Redux Toolkit to initialize the state as shown below

import {DateTime} from "luxon"

interface TestStateProps {
    startDate: DateTime,
    endDate: DateTime,
}

const initialTestState: TestStateProps {
    startDate: DateTime.now(), 
    endDate: DateTime.now(),
}

export const testSlice = createSlice({
    name: 'test',
    initialTestState,
    reducers: {
        addDay: (state, action: PayloadAction<number>) => {
            console.log(state.startDate instanceof DateTime)
            console.log(JSON.stringify(state.startDate))
            console.log(state.startDate.plus({days: action.payload }))
        }
    }
})

The output of the console.log is not what I expected

console.log(state.startDate instanceof DateTime)

false

Why does it return false? I initialized it with DateTime.now()

console.log(JSON.stringify(state.startDate))

{"ts":1724911978667,"_zone":{},"loc":{"locale":"en-DE","numberingSystem":null,"outputCalendar":null,"weekSettings":null,"intl":"en-DE","weekdaysCache":{"format":{},"standalone":{}},"monthsCache":{"format":{},"standalone":{}},"meridiemCache":null,"eraCache":{},"specifiedLocale":null,"fastNumbersCached":null},"invalid":null,"weekData":null,"localWeekData":null,"c":{"year":2024,"month":8,"day":29,"hour":8,"minute":12,"second":58,"millisecond":667},"o":120,"isLuxonDateTime":true}

It seems like the expected result because of "isLuxonDateTime":true. But why is

state.startDate instanceof DateTime

returning false? In the redux dev tools, it doesn't seem to be deserialized or something

https://i.sstatic.net/CbuAS2tr.png

console.log(state.startDate.plus({days: action.payload }))

eventually throws an error

Uncaught TypeError: state.startDate.plus is not a function

What am I missing here?

javascript typescript datetime redux-toolkit luxon

Answer 1

Answer №1

I believe the issue lies in Redux Toolkit deserializing the state, leading to potential loss in complex objects (Implementing a custom serializer for different parts of a redux state). The workaround I discovered involves storing dates in milliseconds and converting them when necessary.

import {DateTime} from "luxon"

interface TestStateProps {
    startDateMilliseconds: number,
    endDateMilliseconds: number,
}

const initialTestState: TestStateProps {
    startDate: DateTime.now().toMillis(), 
    endDate: DateTime.now().toMillis(),
}

export const testSlice = createSlice({
    name: 'test',
    initialTestState,
    reducers: {
        addDay: (state, action: PayloadAction<number>) => {
            const startDate = DateTime.fromMillis(state.startDateMilliseconds)
            state.endDateMilliseconds = startDate.plus({days: action.payload}).toMillis()
        }
    }
})

Answer 2

I believe the issue lies in Redux Toolkit deserializing the state, leading to potential loss in complex objects (Implementing a custom serializer for different parts of a redux state). The workaround I discovered involves storing dates in milliseconds and converting them when necessary.

import {DateTime} from "luxon"

interface TestStateProps {
    startDateMilliseconds: number,
    endDateMilliseconds: number,
}

const initialTestState: TestStateProps {
    startDate: DateTime.now().toMillis(), 
    endDate: DateTime.now().toMillis(),
}

export const testSlice = createSlice({
    name: 'test',
    initialTestState,
    reducers: {
        addDay: (state, action: PayloadAction<number>) => {
            const startDate = DateTime.fromMillis(state.startDateMilliseconds)
            state.endDateMilliseconds = startDate.plus({days: action.payload}).toMillis()
        }
    }
})

Error message: The Luxon DateTime was not recognized as a valid Luxon DateTime object

Answer №1

Similar questions

Vue-Apollo - The 'value' property is not present in the 'Readonly<Ref<Readonly<any>>>' type

Ways to receive JavaScript console error messages to aid in debugging your code

Changing an array of objects into nested objects in JavaScript

Issue with toggling functionality in Vue.js between two identical components

How to resolve the issue of undefined location in React and Next.js?

The custom modal does not seem to be compatible with the CSS3 animation library,

"Encountering an 'Undefined function' error while implementing AJAX in the code

Limiting the size of image uploads in AWS S3

Updating ngRepeat Array Data in AngularJS using Events

What's the best way to align this text and icon next to each other?

Unleashing the Power of JavaScript to Boost Page Performance

Error encountered during the building of a Java project using Gradle

Unable to scroll horizontally beyond 200 viewport widths

What is the best method to combine two BufferGeometries into a single BufferGeometry using Three.JS?

In React, the clearInterval() function does not effectively clear intervals

The Angular checked functionality is not working as expected due to the presence of ngModel

Challenges arise with the height settings of ui-grid

Managing DateTime data type between C# and PHP using SOAP web services

Tips on effectively rendering child components conditionally in React

Issue with Angular Factory not being invoked