Есть функция, которая вызывается в компоненте, я получаю название фильма, он может быть либо в массиве (несколько фильмов), либо один фильм строкой.
Ожидается, что если передаётся массив, то запускаем метод map, он пробегается по каждому названию фильма и вызывает на каждый айтем асинхронную функцию, которая обращается к апи, собирает все нужные данные, а после передаёт это в массив. После чего мы передаём массив в экшен и где он обрабатывается.
Но по итогу в экшен прилетает пустой массив, а консоль логи выводятся в таком порядке: второй консоль лог, первый консоль лог. То есть массив не успевает наполниться, а мы уже его отправляем в экшен. Почему так происходит, если я использую async/await?
export const getDataMovie = (filmName) => {
return async (dispatch) => {
const movieData = await [];
const getData = async (film) => {
let resp = await fetch(
`http://www.omdbapi.com/?t=${film}&apikey=...`
);
resp = await resp.json();
const title = await resp.Title;
const year = await resp.Year;
const genre = await resp.Genre;
await movieData.push({ title, year, genre });
await console.log(movieData); // первый консоль
};
if (Array.isArray(filmName)) {
await filmName.map((item) => getData(item));
await console.log(movieData); // второй консоль
await dispatch(getFavoriteMovie(movieData));
} else {
await getData(filmName);
await dispatch(getFavoriteMovie(movieData));
}
};
};
