Ошибка при получении данных с обещанием

Question

Я новичок с обещанием и не могу решить проблему с обещанием.Я должен вернуть новое состояние в функцию loadPosts после извлечения данных из API:

[loadPosts]: (state, index) => {

   fetchPosts().then( data => {
      return {
         ...state,
         postState : {
            postList : data.data
         }
      }            
    })
}

И это моя функция fetchPosts :

export const fetchPosts = () => {

   console.log("Fetch posts...");
   fetch(process.env.REACT_APP_API_URL + '/post')
   .then(response => response.json())
   .then(data => {
      return data
    })
   .catch(error => console.error(error))

}

Я получаю "TypeError: Невозможно прочитать свойство 'then' с неопределенным значением"

В моем понимании первая и вторая затем из fetchPosts функция должна вернутьобещание с разрешенным значением, но вместо этого я получаю неопределенное значение.

Если я изменю извлечение сообщения таким образом (добавив return):

export const fetchPosts = () => {
   console.log("Fetch posts...");
   return fetch(process.env.REACT_APP_API_URL + '/post')
   .then(response => response.json())
   .then(data => {
      return data
   })
  .catch(error => console.error(error))
 }

я получу еще одну ошибку: редуктор "app"вернулся неопределенным.Чтобы игнорировать действие, вы должны явно вернуть предыдущее состояние.

Как я могу использовать обещание для достижения своей цели?

Спасибо

Answer 1

Во-первых, давайте исправим вашу fetchPosts функцию

export const fetchPosts = () => {
   console.log("Fetch posts...");
   return fetch(process.env.REACT_APP_API_URL + '/post')
   .then(response => response.json())
   // the following code is not needed at all
   //.then(data => {
   //   return data
   // })
   // I prefere not to do the error handling here,
   // instead let the caller handle the error
   .catch(error => console.error(error))

}

Теперь, когда функция извлечения сообщений на самом деле что-то возвращает, я могу только сказать вам, что нет пути изнутри функции в вашем первом фрагменте кодавернуть новое состояние с сообщениями, в которые разрешено обещание fetchPosts.Хотя это выглядит очень похоже на редуктор, поэтому я рекомендую вам взглянуть на redux-thunk , который позволяет вам улучшить избыточность с помощью промежуточного программного обеспечения для асинхронного поведения, а затем вы можете отправлять функции в хранилище, которое возвращает обещания.

Answer 2

1.) Вам необходимо вернуть fetch(), чтобы вы могли связать .then().

2.) В вашем редукторе должен быть регистр по умолчанию, который возвращает state.