2

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.

Seth Lutske
  • 9,154
  • 5
  • 29
  • 78
  • 3
    You should not save values in state that can't be [serialized](https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state), the devtools have to show a Date object in some way (convert to text) so they use [toISOString](https://github.com/reduxjs/redux-devtools/blob/511c974e639f78cb4406fc4106ecaf4706fa7917/packages/react-json-tree/src/JSONNode.tsx#L78-L78) 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. Convert it in the selector. – HMR Apr 05 '21 at 19:53
  • The date in the image and the date in your question are completely different though, are you sure that is what you got from the server and that is how it shows in devtools? – HMR Apr 05 '21 at 19:55
  • 1
    Yes those dates are different I was just copy pasing various things to show the format. The link you posted to the redux-devtools source code answers my question for me - they default to showing an ISO string. I completely agree about the format used when saving to the store, I guess I'll have to go ahead and change the code. Feel free to post this in an answer and I can mark it as such. – Seth Lutske Apr 05 '21 at 20:45
  • 2
    Don't call `console.log` directly on a `Date` object. [The behavior is undefined](https://github.com/whatwg/console/issues/132). – Matt Johnson-Pint Apr 05 '21 at 21:05

1 Answers1

3

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.

HMR
  • 37,593
  • 24
  • 91
  • 160