如何使用 redux-saga 正确处理一个动作？

Question

我在我的项目中使用 redux-saga 和 react。我的一个传奇故事是这样的：

    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);
  }

我想做的是把我的行为看成是一个承诺，这样我就可以知道saga发出的请求何时完成。这是我的组件中的号召性用语：

    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),
      });

什么是完成我需要的最好方法？

Answer 1

Redux saga 并没有一个简单的方法来做到这一点。最常见的情况是，您会启动一个操作然后忘记它。如果您确实关心该操作的结果，则可以让 saga 对 redux 存储进行一些更改，并且状态更改会提醒您它已完成。

我能想到一种方法：在分派操作时，您需要创建一个新的承诺，并将 resolve 和 reject 函数作为操作的一部分传递。然后 saga 将执行它所做的，并在完成后调用 resolve 或 reject。例如：

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);
  }
}

如何使用 redux-saga 正确处理一个动作？

How to handle an action correctly with redux-saga?

reactjs

redux-saga