2

I'm keeping some objects in my Redux store, and some properties are of the type: Firestore.Timestamp.

Example:

blogPost: {
  title: string,
  createdAt: firestore.Timestamp
}

And I'm getting these warnings:

A non-serializable value was detected in the state, in the path: BLOGPOST.blogPost.createdAt. Value: t {seconds: 1583488258, nanoseconds: 805000000}

Take a look at the reducer(s) handling this action type: BLOGPOST/LOAD_BLOGPOST_SUCCESS. (See https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state)

From: https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state

It is highly recommended that you only put plain serializable objects, arrays, and primitives into your store. It's technically possible to insert non-serializable items into the store, but doing so can break the ability to persist and rehydrate the contents of a store, as well as interfere with time-travel debugging.

If you are okay with things like persistence and time-travel debugging potentially not working as intended, then you are totally welcome to put non-serializable items into your Redux store. Ultimately, it's your application, and how you implement it is up to you. As with many other things about Redux, just be sure you understand what tradeoffs are involved.

I definitely want persistence and time-travel to keep working well. Should I bother to convert my firestore.Timestamp to JS Dates before dispatching it to Redux ? Or can I safely ignore this?

cbdeveloper
  • 27,898
  • 37
  • 155
  • 336

1 Answers1

1

Per that description, we would specifically recommend that you convert those to a primitive value such as a timestamp string or a number.

markerikson
  • 63,178
  • 10
  • 141
  • 157
  • 2
    Do you, by any chance, know what the standard practice is for this in 2022? I am having a similar issue. I've tried using the middleware (serializableCheck) but it hasn't worked. And im not sure how to convert it and still return as apart of the original object. – Erick Adam Nov 26 '22 at 23:06
  • The `serializableCheck` middleware is just that - a check that gives warnings. It doesn't actually convert anything. Standard practice is still the same - we recommend storing dates as strings or numeric timestamps when putting them in Redux. – markerikson Nov 27 '22 at 01:02
  • If I set serializableCheck to false (and ignoreActions), it shouldn't show up, right? Well I did that, but for some reason it is still showing up. Do you know standard practice for storing the timestamp as a string when using Redux toolkit? – Erick Adam Nov 27 '22 at 05:55
  • 1
    Hmm. Yeah, if you have `serializableCheck: false`, you shouldn't see that warning at all. I haven't worked with Firebase, so I don't know what methods its date class offers, but there should be _some_ way to convert it into an ISO string, which can be re-parsed later into a date as needed. – markerikson Nov 27 '22 at 23:44