Как правильно обработать действие с помощью redux-саги? - PullRequest
Новая
       17

Как правильно обработать действие с помощью redux-саги?

0 голосов
/ 03 ноября 2019

Я использую Redx-сагу в моем проекте с реакции. Одна из моих саг выглядит следующим образом: 

    function* deleteCitySaga(payload) {
  const config = {
    headers: {
      Authorization: 'Bearer ' + loadState(),
      Accept: 'application/json'
    }
  };
  const data = yield axios.delete(routeDeleteCiudad + payload.id, config)
    .then(response => response)
    .catch(err => err.response);
  }

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

    handleEliminar = () => {

     this.props.handleDelete(this.state.id)
     .then((success)=>{console.log('End')})//This is what I want to do, I want to know when my action ends
     .catch((error)=>alertError);
    };

    const mapDispatchToProps = dispatch => ({
     handleDelete: bindActionCreators(deleteCity, dispatch),
      });

Каков наилучший способ сделать то, что мне нужно?

1 Ответ

0 голосов
/ 03 ноября 2019

Redux Saga на самом деле не имеет простого способа сделать это. Чаще всего вы запускаете действие, а затем забываете об этом. Если вам не безразличны результаты этого действия, вы можете заставить сагу внести некоторые изменения в хранилище редуксов, и именно это изменение состояния предупреждает вас о том, что оно сделано.

Я могу вспомнить односпособ сделать это: при отправке действия вам нужно будет создать новое обещание и передать функции разрешения и отклонения как часть действия. Затем сага будет делать то, что она делает, и называть ее разрешением или отклонением, как только это будет сделано. Например: 

const mapDispatchToProps = dispatch => ({
  handleDelete: (id) => new Promise((resolve, reject) => {
    dispatch({ type: 'deleteCity', id, resolve, reject });
  });
})

function* deleteCitySaga(action) {
  try {
    // some code omitted
    const response = yield axios.delete(routeDeleteCiudad + action.id, config);
    action.resolve(response);
  } catch (err) {
    action.reject(err);
  }
}
...