如何在 saga 异步请求后设置状态 [英] how to setstate after saga async request

问题描述

我在我的项目中使用 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 后，您可以执行以下可能的操作.

1. 进行另一个 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.fetchBranchDetailsS​​uccess(branchDetails))；} 捕捉(错误){yield put(ProfileActions.fetchUserDetailsError(error));}}

2. 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.fetchBranchDetailsS​​uccess(branchDetails))；} 捕捉(错误){yield put(ProfileActions.fetchUserDetailsError(error));}

   }

3. 更新 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.

1. Make another api call like

function* onLogin(action) {
  try {
    const { userName, password } = action;
    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);
    yield put(ProfileActions.fetchBranchDetailsSuccess(branchDetails));
  } catch (error) {
    yield put(ProfileActions.fetchUserDetailsError(error));
  }
}

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

   }

3. 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 异步请求后设置状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！