firestoreからgetしたデータを一部加工してreduxに渡す

Question

前提・実現したいこと

firebaseのデータベースから、投稿データを取得してreduxで管理したいのですが、timestampがらみのwarningが出ているので解消したいです。

発生している問題・エラーメッセージ

問題なく動作するのですが、dev toolのconsoleに以下のwarningが出てしまいます。

index.js:1 A non-serializable value was detected in an action, in the path: `payload.0.timestamp`. Value: t {seconds: 1621508698, nanoseconds: 794000000}

なぜこうなるかはわかっていて、firestoreから取得したデータの構造が下のようになっており

payload: Array(2)
0:
area: "東京"
cid: "37iehhsgnEggWFTEYmFR"
spot: (3) [{…}, {…}, {…}]
timestamp: t {seconds: 1621508698, nanoseconds: 794000000}

↑timestampの部分の構造がまずいので、これをpayloadとするとwarningが出るのかな、と思っています。
そこでgetしたデータをtoDate()メソッドを使って加工して

payload: Array(2)
0:
area: "東京"
cid: "37iehhsgnEggWFTEYmFR"
spot: (3) [{…}, {…}, {…}]
timestamp: 何年何月何日...

という形にできれば問題がないと思われるのですが、その方法がわかりません。調べてもgetしたデータの一部だけ加工する方法がヒットしませんでした。またget.then()の中で加工するのがいいのか、それともgetした後return querySnapshot.docs.mapの中で加工するのがいいのかも皆目検討がつきません。これから頑張って更に調べようと思いますが、わかる方がいたらご教授願いたいです。

該当のソースコード

export const fetchAsyncGetCourse = createAsyncThunk(
  "task/getcourse",
  async (area) => {
    const querySnapshot = await db
      .collection("posts")
      .where("area", "==", area)
      .orderBy("likeCount", "desc")
      .orderBy("timestamp", "desc")
      .limit(2)
      .get()
      .then();
    return querySnapshot.docs.map((postDoc) => 
    postDoc.data()
    );
  }
);

...
  extraReducers: (builder: any) => {
    builder.addCase(
      fetchAsyncGetCourse.fulfilled,
      (state: any, action: PayloadAction<COURSE>) => {
        return {
          ...state,
          course: action.payload,
        };
      }
    );

やったこと

  async (area) => {
    const querySnapshot = await db
      .collection("posts")
      .where("area", "==", area)
      .orderBy("likeCount", "desc")
      .orderBy("timestamp", "desc")
      .limit(2)
      .get();

    //以下書き換え
    const data = querySnapshot.docs.map((postDoc) => postDoc.data());
    console.log(data[0].timestamp.toDate());
    
    return data;
  }

と書き換えることで取得したpostデータの1つ目のtimestampを日付に直すことはできました。あとはこのデータを元のデータのtimestampデータに差し替えたいです。

//追記
元データのtimestampデータを日付に直すことができたのですが、やはり以下のバリデーションが出ました。。。

A non-serializable value was detected in an action, in the path: `payload.0.timestamp`. Value: Thu May 20 2021 20:04:58 GMT+0900 (日本標準時) 

Answer 1

store.tsに以下を追加して、middlewareによる serializableCheckを大目に見てもらうことで警告は消えました。

middleware: getDefaultMiddleware({
serializableCheck: {
// Ignore these action types
ignoredActions: ["task/getcourse", "task/getcourse/fulfilled"],
// Ignore these field paths in all actions
ignoredActionPaths: ["payload.timestamp"],
// Ignore these paths in the state
ignoredPaths: ["course"],
},
}),