Запрос на получение данных в useEffect(). В чем проблема?

Question

[Zhanna_K]

Пытаюсь загрузить массив задач из БД в компоненту через api. Код следующий:
Так я использую хук эффекта

const [tasks, setTasks] = useState([])
const [isLoading, setIsLoading] = useState(false)

 useEffect(() => {
    const fetchData = async (id, fetchFunc) => {
      setIsLoading(true);
      const tasks = await fetchFunc(id);
      setTasks('tasks from fetch', tasks);
      setIsLoading(false);
    };
    fetchData(projectId, fetchTasks);
  }, []);

Собственно сами экшены:

export const  recieveTasks = (payload) => {
  return {
    type: GET_PROJECT_TASKS,
    tasks: payload,
  };
}

export const fetchTasks = (id) => (dispatch) => {
  API.getProjectTasks(id).then((tasks) => dispatch(recieveTasks(tasks)));
};

Что я вижу в логгере:

данные пришли c сервера, диспатчится экшен. Почему tasks = undefined? Ведь я использую async await и мы ожидаем получения данных от fetch.

Подскажите, что я не улавливаю?

Comments

[WbICHA]

А разве диспатч не возвращает андефайнд? Отсюда и андефайнд.

[Zhanna_K]

WbICHA, так и есть. Спасибо!

[Robur]

оффтопик: вы можете написать useEffect(async () => {, тогда не нужна будет отдельная fetchData функция

[Zhanna_K]

Robur, прочла, что так делать нельзя. Эту статью советовал сам Дэн Абрамов.
Вот ссылка How to fetch data with React Hooks?

Цитата

Promises and useEffect(async () => ...) are not supported, but you can call an async function inside an effect.. That's why using async directly in the useEffect function isn't allowed. Let's implement a workaround for it, by using the async function inside the effect.

[Robur]

Zhanna_K, ваша правда, забыл что useEffect ждет функцию в возвращаемом значении.