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

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

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

вот мой код:

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

спасибо

9
react-redux reactjs

3 ответов

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

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

export function bindComments(postId) {

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

вы не можете использовать 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));
      })
  }
}
2

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

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

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