Search code examples
javascriptdatereduxredux-devtoolstoisostring

Date format acting strange in redux devtools

I'm working with an existing codebase, and the existing code calls for a date from an endpoint. The expected value is an ISO string (i.e. "2020-01-09T07:41:02.6025984-05:00"):

// in my sagas:

export function* handleGetServerTime(): Generator {
  try {
    const response = (yield call(
      axios.get,
      "/api/server/time"
    )) as AxiosResponse;

    // Format the response time string into a Date object
    const time = new Date(response.data);
    console.log(time);

    yield put(ActionCreators.GetServerTimeSuccess.create(time));
  } catch (error) {
    // ...
  }
}

As you can see, the code takes the ISO string, creates a new Date from it, and then sends it to the action and reducer, which saves it to the store as a new Date.

When I open up my redux devtools, I see an ISO timestring again:enter image description here

However the console.log statement above prints what we usually see when we run a new Date: Mon Apr 05 2021 11:56:25 GMT-0700 (Pacific Daylight Time). I get the same thing when I go into my console and check store.getState().somewhere.timeFromServer.

Does redux devtools have some default behavior to show a Date object as its ISO string?

Note I am not at all a fan of this programming pattern - I would rather store the raw ISO string that comes back from the server, and do any date manipulation in my front end code. This has thrown me for a loop all morning because the ISO string f=coming from the server and the one being shown in the devtools are not the same! Converting from an ISO string to a new Date and back again will strip the UTC time offset, which I don't want to loose.

Solution

  • You should not save values in state that can't be serialized, the devtools have to show a Date object in some way (convert to text) so they use toISOString but this iso string is localized to Zulu time. To prevent confusion it would be better to save the string and not convert it to date and convert it in the selector.