Что будет лучшим подходом для Redux-thunk Async Request для обработки onSuccess и onError? - PullRequest
Новая
       14

Что будет лучшим подходом для Redux-thunk Async Request для обработки onSuccess и onError?

0 голосов
/ 14 марта 2019

Какой должен быть лучший подход для управления асинхронными запросами Redux-Thunk.как будто я публикую некоторые данные на сервере, а подключенный компонент проверит ошибки с помощью

Подход 1: Я просто возвращаю новое Обещание в моих создателях действий, чтобы проверить разрешение или отклонение, используя затем 

const update = (todoId, isDone) => (dispatch) =>
new Promise(function(resolve, reject) {
dispatch({
  type: 'SET_SAVING',
  saving: true
});
// Function is expected to return a promise
callUpdateApi(todoId, isDone).then(updatedTodo => {
  dispatch({
    type: 'SET_SAVING',
    saving: false
  });

  resolve(updatedTodo);
}).catch(error => {
  // TBD: Handle errors for Redux

  reject(error);
})
});

Подход 2: использование диспетчера для управления ошибками в методе рендеринга с помощью условий if-else 

const update = (todoId, isDone) => (dispatch) => {
dispatch({
    type: 'SET_SAVING',
    saving: true
  });
  // Function is expected to return a promise
  callUpdateApi(todoId, isDone).then(updatedTodo => {
    dispatch({
      type: 'SET_SAVING',
      saving: false
    });
  });
  // TBD: Handle errors
}

, пожалуйста, помогите мне найти лучшее решение для этого, если я воспользуюсь «return Promise» от создателей Action или простоиспользуя диспетчерские действия для хранения ошибок и успешной обработки всегда.потому что при успехе мне нужно сделать что-то в моем компоненте и при ошибке также

Ответы [ 2 ]

0 голосов
/ 14 марта 2019

Лучшая практика, которую мы используем, - каждое отправляемое действие thunk 3 действия:

  1. действие запущено
  2. действие выполнено
  3. действие не выполнено

callUpdateApi - это обещание, затем просто верните его в свой блок следующим образом: 

const update = (params) => (dispatch) => {
  dispatch(started())
  return callUpdateApi(params)
    .then(result => dispatch(succeeded(result)))
    .catch(error => dispatch(failed(error)))
}

и внутри редуктора вы можете переключить флаг saving для запуска, установить его на true и для успешногоили не удалось установить false вот и все.

0 голосов
/ 14 марта 2019 
const update = (todoId, isDone) => (dispatch) =>
new Promise(function(resolve, reject) {
dispatch({
  type: 'SET_SAVING',
  saving: true
});
// Function is expected to return a promise
callUpdateApi(todoId, isDone).then(updatedTodo => {
  dispatch({
    type: 'SET_SAVING',
    saving: false
  });

  resolve(updatedTodo);
}).catch(error => {
  // TBD: Handle errors for Redux

  reject(error);
})
});

Если ваше callUpdateApi возвращает обещание, вам не нужно заключать все действие в обещание, просто можно просто вернуть callUpdateApi.Что касается обработки ошибок, общий способ - установить флаг где-нибудь в вашем состоянии избыточности вместе с флагом saving, например, чтобы знать, когда произошла ошибка.Затем ваши компоненты будут получать эти флаги и что-то с ними делать 

const update = (todoId, isDone) => (dispatch) => {
  dispatch({
    type: 'SET_SAVING',
    saving: true
  });

  return callUpdateToApi(todoId, isDone).then(updatedTodo => {
    dispatch({
      type: 'SET_SAVING',
      saving: false,

      // Do something with your API response
      // e.g. update your redux store via a reducer
      updatedTodo
    });
  })
  .catch(err => {
    // Handle error, for example set a error flag
    // in your redux state so your components know an error occured
     dispatch({
      type: 'SET_SAVING',
      saving: false,
      error: true
    });
  });
}

Подключите ваш компонент, чтобы они могли получить доступ к флагам error и saving и, например, отобразить ошибку при сбое вызова: 

export default connect(
  state => ({
    error: state.module.error,
    saving: state.module.saving
  })
)(Component);

// Inside your JSX
{this.props.error && <p>An error occured</p>}
...