Как заставить await работать с Saga в React? - PullRequest
Новая
       23

Как заставить await работать с Saga в React?

0 голосов
/ 12 мая 2019

await не работает с сагой Redux.Мне нужно дождаться завершения вызова API и выполнить оставшийся код.Теперь происходит то, что AFTER CALL печатается до RESPONSE, что означает, что ожидание, похоже, не работает вообще.Я использую асинхронные вызовы, но не уверен, что нужно делать дополнительно со стороны избыточной саги?

async componentWillMount() {
    console.log("BEFORE CALL")
    await this.props.getUserCredit()
    console.log("AFTER CALL")

}

mapDispatchToProps = (dispatch) => {
  return {
    getUserCredit: () => dispatch(getUserCredit()),
  }
};

connect(null, mapDispatchToProps)(MyComponent);

Action

export const getUserCredit = () => {
  return {
    type: GET_USER_CREDIT,
  };
};

Redux Saga

const getUserCreditRequest = async () => {
  const response = await Api.get(getCreditUrl)
  console.log("REPONSE!!!")
  console.log(response)
  return response
}

function* getUserCredits() {
  try {
    const response = yield call(getUserCreditRequest);
    if (response.status === okStatus) {
      yield put({
        userCredit: response.data.userCredit
      }
      ));
    }
  } catch (error) {}
}

export function* getUserCredit() {
  yield takeLatest(GET_USER_CREDIT, getUserCredits);
}

export default function* rootSaga() {
  yield all([fork(getUserCredit)]);
}

Ответы [ 2 ]

1 голос
/ 16 мая 2019

Обычно инициализация / извлечение происходит в течение componentDidMount и не используют async или await внутри компонентов.Пусть промежуточное программное обеспечение саги делает свое дело через yield. 

// In your component
componentDidMount() { // not async
  this.props.getUserCredit(); // dispatch `GET_USER_CREDIT` action 
}

mapDispatchToProps = (dispatch) => {
  return {
    getUserCredit: () => dispatch(getUserCredit()),
  }
};

connect(null, mapDispatchToProps)(YourComponent);
0 голосов
/ 12 мая 2019

Вы не должны использовать шаблон async / await. Как redux-saga обрабатывает это по ключевому слову yield. К моменту разрешения call значение будет доступно в response.

в actions.js, у вас должно быть действие, которое будет передавать ваши данные вашему редуктору: 

export function getUserCredits(userCredit) {
  return {
    type: types.GET_USER_CREDIT_SUCCESS,
    payload: userCredit
  };
}

Ваша сага должна обрабатывать вызов API следующим образом: 

function* getUserCredits() {
  try {
    const response = yield axios.get(getCreditUrl); <--- This should work
    // No need for if here, the saga will catch an error if the previous call failed
    yield put(actions.getUserCredits(response.data.userCredit));
  } catch (error) {
    console.log(error);
  }
}

РЕДАКТИРОВАТЬ : пример использования axios с redux-saga

...