Ошибка 400 для вызова API в реагирующем редуксе работает нормально в примере

Question

• Я пытаюсь научиться реагировать на вызов Redux Api
• поэтому я взял пример и реализовал в stackblitz, но я получаю ошибку ниже GET https://newsapi.org/v1/articles?%20%20%20%20%20%20%20source=bbc-news&apiKey=c39a26d9c12f48dba2a5c00e35684ecc 400 (неверный запрос)
• подскажите как это исправить
• предоставив мой код и стекаблитц ниже https://medium.com/@lavitr01051977/basic-react-redux-app-with-async-call-to-api-e478e6e0c48b

https://stackblitz.com/edit/react-redux-realworld-4ldsnt?file=components/ChannelsField.js

export function fetchPosts(channel) {
  return function (dispatch) {
    dispatch(requestPosts());
    return fetch(`https://newsapi.org/v1/articles? 
      source=${channel}&apiKey=${MY_API_KEY}`)
      .then(
      response => response.json(),
      error => console.log('An error occurred.', error),
    )
      .then((json) => {
        dispatch(receivedPosts(json));
      },
    );
  };
}

Answer 1

Похоже, ваш запрос имеет дополнительные пробелы (% 20) между?и источник, который вызывает 400 неправильных запросов.Измените свою функцию на следующую, и она должна работать:

export function fetchPosts(channel) {
   return function (dispatch) {
      dispatch(requestPosts());
      return fetch(`https://newsapi.org/v1/articles?source=${channel}&apiKey=${MY_API_KEY}`)
         .then(response => response.json(),
            error => console.log('An error occurred.', error),
         )
         .then((json) => {
            dispatch(receivedPosts(json));
         },);
   };
}

Вот тот же самый запрос GET без пробелов:

https://newsapi.org/v1/articles?source=bbc-news&apiKey=c39a26d9c12f48dba2a5c00e35684ecc