reactjs - 如何在 saga 异步请求后设置状态

Question

我在我的项目中使用 redux-saga。我之前使用过 redux-thunk，所以我无法 setState 结束某些异步请求。喜欢

this.props.thunkAsync()
  .then(){
    this.setState({ '' });
  }

由于 thunk 返回 promise ，我可以使用“then”。但我不能用 saga 这样做，因为 saga 不会返回 promise 。所以我在 componentWillReceiveProps 中通过检查标志 Prop (如 REQUEST_SUCCESS、REQUEST_WAITING...)已更改来完成此操作。我认为这不是解决这个问题的好方法。

所以..我的问题是当异步请求以 redux-saga 结束时我该如何做一些工作!

Answer 1

But i can't do this with saga, because saga doesn't return promise

Redux-saga 与 thunk 略有不同，因为它是进程管理器，而不是简单的中间件:thunk 仅对触发的操作执行 react ，但是saga有自己的“流程”(正式的回调tick域)并且可以通过效果来操作 Action 。

使用 redux-saga 执行异步操作的常用方法是将原始操作拆分为 ACTION_REQUEST、ACTION_SUCCESS 和 ACTION_FAILURE > 变体。然后reducer只接受SUCCESS/FAILURE操作，并且可能接受optimistic updates的REQUEST 。

在这种情况下，您的 saga 流程可能如下所示

function* actionNameSaga(action) {
    try {    
        const info = yield call(fetch, { params: action.params }
        yield put('ACTION_NAME_SUCCESS', info)
    } catch(err) {
        yield put('ACTION_NAME_FAILURE', err)
    }

function* rootSaga() {
    yield takeEvery('ACTION_NAME', actionNameSaga)
}

请记住，yield 操作本身与 promise 等待无关 - 它只是将异步等待委托(delegate)给 saga 流程管理器。