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

本文介绍了如何在 saga 异步请求后设置状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在我的项目中使用 redux-saga.我之前使用过 redux-thunk，所以我不能 setState 结束一些异步请求.喜欢

this.props.thunkAsync().然后(){this.setState({ '' });}

由于 thunk 返回 promise，我可以使用then".但是我不能用 saga 做到这一点，因为 saga 不返回承诺.因此，我通过检查标志道具(如 REQUEST_SUCCESS、REQUEST_WAITING...)在 componentWillReceiveProps 中进行了更改.我认为这不是解决这个问题的好方法.

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

解决方案

您发出的每个 api 调用都作为异步请求处理，但在 saga 中使用生成器函数进行处理.

因此，在成功调用 api 后，您可以执行以下可能的操作.

进行另一个 api 调用，例如

function* onLogin(action) {尝试 {const { 用户名，密码 } = 动作；const response = yield call(LoginService.login, userName, password);yield put(LoginService.loginSuccess(response.user.id));const branchDetails = yield call(ProfileService.fetchBranchDetails, response.user.user_type_id);产量放置(ProfileActions.fetchBranchDetailsSuccess(branchDetails))；} 捕捉(错误){yield put(ProfileActions.fetchUserDetailsError(error));}}

api成功后传递回调

onLoginClick() {const { 用户名，密码 } = this.state;this.props.login(userName, password, this.onLoginSuccess);}onLoginSuccess(用户详细信息){this.setState({ userDetails });}函数 *onLogin(action) {尝试 {const { 用户名，密码，onLoginSuccess } = 动作；const response = yield call(LoginService.login, userName, password);如果(登录成功){onLoginSuccess(响应)；}yield put(LoginService.loginSuccess(response.user.id));const branchDetails = yield call(ProfileService.fetchBranchDetails,response.user.user_type_id);产量放置(ProfileActions.fetchBranchDetailsSuccess(branchDetails))；} 捕捉(错误){yield put(ProfileActions.fetchUserDetailsError(error));}

}

更新 Reducer 状态并通过 mapStateToProps 从 props 获取

yield put(LoginService.loginSuccess(response.user.id));@连接(状态 =>({usedDetails: state.user.get('usedDetails'),}))静态 getDerivedStateFromProps(nextProps, prevState) {const { usedDetails } = nextProps;返回 {使用详情}}

I'm using redux-saga in my project.I used redux-thunk before, so i can't setState ends of some async request. like

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

Since thunk returns promise, i could use 'then'.But i can't do this with saga, because saga doesn't return promise.So i did it in componentWillReceiveProps by checking flag props (like REQUEST_SUCCESS,REQUEST_WAITING...) has been changed.I think it's not good way to solve this problem.

So.. My question is how can i do some works when async request ends in redux-saga!

解决方案

Every api call you make is processed as an async request but handled using a generator function in a saga.

So, After a successful api call, you can do the following possible things.

Make another api call like

Pass a Callback after successfull api

onLoginClick() {
  const { userName, password } = this.state;
  this.props.login(userName, password, this.onLoginSuccess);
}

onLoginSuccess(userDetails) {
  this.setState({ userDetails });
}

function *onLogin(action) {
  try {
     const { userName, password, onLoginSuccess } = action;
     const response = yield call(LoginService.login, userName, password);
     if (onLoginSuccess) {
         onLoginSuccess(response);
     }

     yield put(LoginService.loginSuccess(response.user.id));
     const branchDetails = yield call(ProfileService.fetchBranchDetails,
     response.user.user_type_id);
     yield put(ProfileActions.fetchBranchDetailsSuccess(branchDetails));
 } catch (error) {
     yield put(ProfileActions.fetchUserDetailsError(error));
 }

}

Update Reducer State and get from props by mapStateToProps

yield put(LoginService.loginSuccess(response.user.id));
@connect(
    state => ({
        usedDetails: state.user.get('usedDetails'),
    })
)
static getDerivedStateFromProps(nextProps, prevState) {
    const { usedDetails } = nextProps;
    return {
        usedDetails
    }
}

这篇关于如何在 saga 异步请求后设置状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Saga

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

问题描述