React-Reduxでfirestoreのデータを取得しソートした後の値でdispatchしたい

前提・実現したいこと

react、firestoreを用いてアプリケーションを作成しています。
フォロイーの投稿を一覧表示にする際、
フォロイーの投稿を下記ソースコードのdocIDsにpostIdの配列で渡しています。
docIDs内のpostIdそれぞれに対してget()でPostコレクション内のデータを取得し、ソートをしています。

docIDs.map内にdispatch(fetchPostsAction(postlist))を置くことで思うような表示自体はできるようにはなっていますが
map内に置いているため表示するpostの数だけdispatchされてしまいます。
mapの後に置くとdocIDs.mapの処理を待たず、空の配列でdispatchしてしまいます。

データを取得し、ソートした後のデータを一度だけdispatchしたいのですが
非同期処理についての理解が浅く、思うような結果にならず改善方法もわからず困っております。

改善方法がわかる方がいらっしゃればご教授願えればと思います。

該当のソースコード

js
1export const fetchPosts = (docIDs) => {
2  return async (dispatch) => {
3    // PostsコレクションからPost_idでデータ取得
4    if (docIDs !== undefined) {
5      const postlist = []
6      docIDs.map(postId => {
7        postsRef.doc(postId).get()
8          .then(snapshot => {
9            const data = snapshot.data()
10            postlist.push(data)
11            postlist.sort((a, b) => {
12              if(a.created_at > b.created_at) return -1;
13              if(a.created_at < b.created_at) return 1;
14              return 0;
15            })
16            dispatch(fetchPostsAction(postlist))
17          })
18      })
19    }
20

試したこと

docIDs.map(async postId => {
await postsRef.doc(postId).get()...

としてみたりしましたがそもそも使い方が間違ってるでしょうか。。。

追記（解決しました。）

回答いただいた方法を参考に実装できたように思っていたコードでは非同期の完了が待てていませんでした。
試行錯誤の後、下記コードでうまく動くようになりました！

export const fetchPosts = (docIDs) => {
  return async (dispatch) => {
    // PostsコレクションからPost_idでデータ取得
    if (docIDs !== undefined) {
      const postlist = []
      const fetchPost = docIDs.map(async (postId) => {
        await postsRef.doc(postId).get()
          .then((snapshot) => {
            const data = snapshot.data()
            postlist.push(data)
          })
        return postlist
      });
      
      const arraylength = fetchPost.length - 1;
      fetchPost[arraylength].then((result) => {
        result.sort((a, b) => {
          if(a.created_at > b.created_at) return -1;
          if(a.created_at < b.created_at) return 1;
          return 0;
        })
        dispatch(fetchPostsAction(result))
      })
    }

行動規範の内容に同意します

回答1件

mapの戻りとなる配列を使えばいいのではないでしょうか？

javascript
1docIDs.map(postId => {
2  postlist = postsRef.doc(postId).get().then(snapshot => {
3    const data = snapshot.data();
4    return data;
5  });
6
7  postlist.sort((a, b) => {
8    if(a.created_at > b.created_at) return -1;
9    if(a.created_at < b.created_at) return 1;
10    return 0;
11  });
12  
13  dispatch(fetchPostsAction(postlist))
14})