파이어스토어에서 데이터를 가져오기까지 기다렸다가 가져오는데 성공하면 alert을 띄워 알려주려고 할 때, 구현 방식?

 

export const addDictionaryFB = (list) =>{
    return function (dispatch){
       const docRef=  addDoc(collection(db,"dictionary"),list);
       console.log(( getDoc(docRef)).data());
    }
}

이렇게 코드를 작성하면 서버에 db의 dictionary에 있는 데이터를 가져오는 것을 요청하고 바로 그 다음줄로 넘어가서 진행되어 콘솔에 getDoc(docRef)).data() 가 비어있는 것으로 찍히게 된다.

 

 

export const addDictionaryFB = (list) =>{
    return async function (dispatch){
       const docRef= await addDoc(collection(db,"dictionary"),list);
       console.log((await getDoc(docRef)).data());
       alert('성공!')
    }
}

 

이를 해결하기 위해서 미들웨어에서 async await 를 써서 서버가 데이터를 가져올때까지 기다린 후
밑에 코드에 alert를 작성하면 데이터를 가져오고나서 alert가 뜨게 된다.