Как вызвать еще один метод при success action-a, react/redux?

Question

[ch-aqwer]

Добрый день! Подскажите пожалуйста как правильно сделать еще один запрос в action(react/redux)?
Есть такой запрос, его вызываю в componentDidMount() и если success то надо выполнить еще один аналогичный.

export const getReq = data => (
  async (dispatch) => {
    console.log(dispatch);
    try {
      await dispatch({
        type: types.GET_REQUEST,
      });
      await api.getReq(data);
      console.log(data);
      await dispatch({
        type: types.GET_SUCCESS,
        payload: data,
      });

      await api.getReq2(data); // ЗДЕСЬ ТАК ПРОБУЮ ВЫЗВАТЬ ЕЩЕ ОДИН ТАКОЙ ЖЕ ЗАПРОС
    } catch (error) {
      await dispatch({
        type: types.GET_ERROR,
      });
    }
  }
);

но в таком случае он не выполняется вообще. Что-то не правильно пишу.

Спасибо

Comments

[Роман Александрович]

думаю вам помогут промисы
https://learn.javascript.ru/promise

думаю надо привести запросы к виду
apiGet(...)
.then(apiGet)
.then(apiGet)
.then(apiGet)

[ch-aqwer]

Роман Александрович, а если так
await Promise.all([getReq2(data)]);

как в getReq2 далее работать?

[Роман Александрович]

ch-aqwer,

await Promise.all([getReq2(data)])
.then(
    getNewReq()
)

попробуйте так

[ch-aqwer]

Роман Александрович, это тоже самое получается
Есть такой код

export const getReq = data => (
  async (dispatch) => {
    console.log(dispatch);
    try {
      await dispatch({
        type: types.GET_REQUEST,
      });
      await api.getReq(data);
      await dispatch({
        type: types.GET_SUCCESS,
        payload: data,
      });

      await dispatch({
        type: types.GET_REQUEST2,
      });
   await api.getReq2(data);
      console.log(data);
      await dispatch({
        type: types.GET_SUCCESS2,
        payload: data,
      });
    } catch (error) {
      await dispatch({
        type: types.GET_ERROR,
      });
    }
  }
);

мне нужно просто вынести в другую функцию это

await dispatch({
        type: types.GET_REQUEST2,
      });
   await api.getReq2(data);
      console.log(data);
      await dispatch({
        type: types.GET_SUCCESS2,
        payload: data,
      });

[Роман Александрович]

ch-aqwer, а я вам еще раз повторю что вам нужны промисы для этого
вы делаете асинхронный запрос например fetch()
потом пишете
.then(()=>{

})
а внутри тварите все что вам надо сделать
функцию не фунцию другой запрос диспатч не важно

можете написать другую функию в нее засунуть ваш код и вызвать
.then(()=>{
myFunc()
})

Answer 1

[Антон Спирин]

Так:

export const getReq = data => (
  async dispatch => {
    try {
      dispatch({
        type: types.GET_REQUEST,
      });

      let res = await api.getReq(data);
      
      dispatch({
        type: types.GET_SUCCESS,
        payload: res,
      });

      res = await api.getReq2(data); 

    } catch (error) {
      dispatch({
        type: types.GET_ERROR,
      });
    }
  }
);

dispatch синхронный вызов, нет смысла перед ним писать await.

Если надо запустить втрой aync action то так:

export const getReq = data => (
  async dispatch => {
    try {
      dispatch({
        type: types.GET_REQUEST,
      });

      const res = await api.getReq(data);
      
      dispatch({
        type: types.GET_SUCCESS,
        payload: res,
      });

      dispatch(req2(res));
    } catch (error) {
      dispatch({
        type: types.GET_ERROR,
      });
    }
  }
);

Comments

[ch-aqwer]

req = await api.getReq2(data);
это только сам запрос но мне нужно запустить такой же метод, например:

export const req2 = data => (
  async dispatch => {
    try {
      dispatch({
        type: types.GET_REQUEST2,
      });

      let req = await api.getReq(data);
      
      dispatch({
        type: types.GET_SUCCESS2,
        payload: req,
      });


    } catch (error) {
      dispatch({
        type: types.GET_ERROR2,
      });
    }
  }
);

[Антон Спирин]

ch-aqwer, eсли в data вам надо передать ответ сервера, то так:

export const getReq = data => (
  async dispatch => {
    try {
      dispatch({
        type: types.GET_REQUEST,
      });

      const res = await api.getReq(data);
      
      dispatch({
        type: types.GET_SUCCESS,
        payload: res,
      });

      dispatch(req2(res));
    } catch (error) {
      dispatch({
        type: types.GET_ERROR,
      });
    }
  }
);

 Была семантическая опечатка, правильно не req, а res. От слова response

[ch-aqwer]

Антон Спирин, Такая запись буде норм?

export const req = data => (
  async dispatch => {
    try {
      dispatch({
        type: types.GET_REQUEST,
      });

      const res = await api.getReq(data);
      
      dispatch({
        type: types.GET_SUCCESS,
        payload: res,
      });

      dispatch(req2(res));
    } catch (error) {
      dispatch({
        type: types.GET_ERROR,
      });
    }
  }
);

const req2 = data => (
  async dispatch => {
    try {
      dispatch({
        type: types.GET_REQUEST2,
      });

      const res = await api.getReq2(data);
      
      dispatch({
        type: types.GET_SUCCESS2,
        payload: res,
      });

    } catch (error) {
      dispatch({
        type: types.GET_ERROR2,
      });
    }
  }
);

[Антон Спирин]

ch-aqwer, у вас req2 в req1 используется, а определен ниже. Либо его выше писать, либо в виде функции определить:

function req2(data) {
  return async dispatch => {
    ...
  };
}

[ch-aqwer]

Антон Спирин, Это знаю, спасибо)

Answer 2

[Иван GiBSON]

getReq2 это асинхронная (async) функция?

Comments

[ch-aqwer]

такая же как getReq