Не работает async await || react-redux

Question

Я в useEffect вызываю функции из props, которые получаю из actions(redux). У меня есть action - setPostsRequest, который не вызывается последовательно, хотя я все делаю в async/await.

Вызов -

useEffect(() => {
    async function setPosts() {
        await props.setPostsRequest()
        props.setNumberToCounterPost(2)
        props.filterPosts()
    }
    setPosts()

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

Сама функция -

Последовательность в redux devtools

Как я создаю store -

Answer 1

Вам надо использовать миделварь thunk https://github.com/reduxjs/redux-thunk

UPDATE Добавьте в перед return async (dispatch) и перед await axios.get

useEffect - должен быть синхронным!

UPDTE2

вот пример моей рабочей функции:

export function fetchData(page = 1) {
  return async (dispatch) => {
    dispatch({ type: SHOW_LOADER });
    await axios
      .get("https://api.unsplash.com/photos", {
        params: {
            //PARAMS
        },
      })
      .then((result) => {
        dispatch({
          type: FETCH_DATA,
          payload: { data: result.data, page: page },
        });
        dispatch({ type: HIDE_LOADER });
        dispatch({ type: TOTAL_PAGES, payload: result.headers["x-total"] });
      });
  };
}

в компонента где хотим получить данные импортируем:

import {useDispatch} from 'react-redux'

далее

const dispatch = useDispatch();
useEffect(() => {
    dispatch(fetchData(1));
}, []);

потому что судя по вашему коду вы нигде не диспатчете setPostsRequest()

БЛОГ НА HUSL

Не работает async await || react-redux

Ответы (1 шт):