Блог

Я пытался реализовать перехватчик axios с помощью redux saga. Вот как выглядит мой перехватчик в настоящее время

 const getLocation = ({user}) => user.locationId;
const getToken = ({auth}) => auth.token;

export function* configInterseptors() {
  const locationId = yield select(getLocation);
  const token = yield select(getToken);

  axiosAPI.interceptors.request.use(
    async (req) => {
      req.headers = {
        Authorization: `Bearer ${token}`,
        'X-Merchant-Location': `${!!locationId ? locationId : ''}`
      };

      return req;
    },
    (error) => {
      Promise.reject(error);
    }
  );
}
 

И вот моя корневая сага

 export default function* rootSaga() {
  yield fork(configInterseptors);
  yield all([yield takeEvery(getUserData, getUserDataSaga)]); //Gets token 
  yield all([yield takeEvery(getLocationData, getUsersLocationsSaga)]); //Gets location ID
}
 

Проблема в том, что идентификатор местоположения и токен всегда не определены в перехватчике, хотя я получаю данные с сервера в полном порядке. Как я могу запустить configInterseptors после того, как я получил идентификатор местоположения и токен?

Вместо того, чтобы разветвляться, подключите configureInterseptors сагу к успешным действиям саг токена и идентификатора местоположения, и если оба существуют, настройте перехватчики:

 // in your root saga, with the correct action constants for when data is fetched successfully
yield takeEvery([GET_USER_DATA_SUCCESS, GET_LOCATION_DATA_SUCCESS], configInterseptors);
 

А затем измените configInterseptors , чтобы выйти раньше, если либо locationId или token отсутствует, чтобы не имело значения, в каком порядке запускаются эти саги:

 export function* configInterseptors() {
  const locationId = yield select(getLocation);
  const token = yield select(getToken);
  if (!(locationId amp;amp; token)) {
    return;
  }
  ...