首页 > 解决方案 > 在 redux-saga 中让 yield.put 一个接一个地发生

问题描述

我让 yield.put 一个接一个地发生,因为异步行为对我来说对这个实现没有好处。

生成器函数

export function * createUser (action) {
  try {
    axios.defaults.headers.common['Authorization'] =
      'Bearer ' + localStorage.getItem('userAccessToken')
    console.log(action.payload)
    const user = yield call(axios.post, api.createUser, action.payload)
    yield put(actionCreators.addUserSuccess(user.data))

    const qs = queryString.stringify(action.payload)
    const endpoint = `${api.createUser}?${qs}`
    console.log(endpoint)
    const users = yield call(axios.get, endpoint)
    console.log(users)

    yield put(actionCreators.fetchUsersSuccess(users.data))
  } catch (error) {
    yield put(actionCreators.addUserFailure(error))
  }
}

我有这个生成器函数,我想 在调用yield put(actionCreators.addUserSuccess(user.data))之前完成yield put(actionCreators.fetchUsersSuccess(users.data))

对此的任何帮助将不胜感激

标签: javascriptreactjsreduxreact-reduxredux-saga

解决方案


以下是一些解决方法:

  • 进行actionCreators.addUserSuccess阻塞

  • actionCreators.addUserSuccess完成后调度另一个动作


进行actionCreators.addUserSuccess阻塞

putResolve用于阻止效果的效果创建器。这仅在 addUserSuccess 返回您需要解决的承诺时才有用。

    const response = yield putResolve(actionCreators.addUserSuccess(user.data))
    // use resolved promise in next operation

actionCreators.addUserSuccess completes在)时调度另一个动作

哪里actionCreators.addUserSuccess不返回承诺,这是一个更好的方法。

完成后调度另一个动作actionCreators.addUserSuccess然后take该动作。

    while (true) {
      // say this is the action type that is dispatched in the 
      // middleware that runs actionCreators.addUserSuccess
      const action = yield take('FETCH_USERS'); 
      yield put(actionCreators.fetchUsersSuccess(action.users.data))
    }

推荐阅读