React-Redux: Действия должны быть простыми объектами. Использовать настраиваемое промежуточное программное обеспечение для асинхронных действий

Необработанный отказ (ошибка): действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для асинхронных действий.

Я хотел добавить комментарии к каждому сообщению. Поэтому, когда запускаются выборочные сообщения, я хочу вызвать API выборочных комментариев для всех сообщений.

export function bindComments(postId) {
  return API.fetchComments(postId).then(comments => {
    return {
      type: BIND_COMMENTS,
      comments,
      postId
    }
  })
}

Ответ 1

Вы должны отправить после завершения асинхронного запроса.

Это будет работать:

export function bindComments(postId) {

 return function (dispatch){
   return API.fetchComments(postId).then(comments => {
   // dispatch
     dispatch( {
       type: BIND_COMMENTS,
       comments,
       postId
     })
   })
 }
}

Ответ 2

Вы не можете использовать fetch в действиях без промежуточного программного обеспечения. Действия должны быть простыми объектами. Вы можете использовать промежуточное программное обеспечение, например, redux-thunk или redux-saga, чтобы выполнить выборку и затем отправить другое действие.

Вот пример асинхронного действия с использованием промежуточного программного обеспечения redux-thunk.

export function checkUserLoggedIn (authCode) {
 let url = '${loginUrl}validate?auth_code=${authCode}';
  return dispatch => {
    return fetch(url,{
      method: 'GET',
      headers: {
        "Content-Type": "application/json"
      }
      }
    )
      .then((resp) => {
        let json = resp.json();
       if (resp.status >= 200 && resp.status < 300) {
          return json;
        } else {
          return json.then(Promise.reject.bind(Promise));
        }
      })
      .then(
        json => {
          if (json.result && (json.result.status === 'error')) {
            dispatch(errorOccurred(json.result));
            dispatch(logOut());
          }
          else{
            dispatch(verified(json.result));
          }
        }
      )
      .catch((error) => {
        dispatch(warningOccurred(error, url));
      })
  }
}

Ответ 3

Использование функций Arrow улучшает читаемость кода. Нет необходимости возвращать что-либо в API.fetchComments, вызов API является асинхронным, когда запрос завершен, then получит ответ, там вам нужно просто ввести dispatch тип и данные.

Приведенный ниже код выполняет ту же работу, используя функции Arrow.

export const bindComments = postId => {
  return dispatch => {
    API.fetchComments(postId).then(comments => {
      dispatch({
        type: BIND_COMMENTS,
        comments,
        postId
      });
    });
  };
};