Reactjs 使用redux saga时，等待redux操作完成分派

我有一个redux传奇设置，效果很好。我的一个任务是创建一个新订单，一旦创建了新订单，我想用更新的状态做一些事情

// this.props.userOrders = []

dispatch(actions.createOrder(object))

doSomethingWith(this.props.userOrders)

由于createOrder操作触发调用API的redux saga，因此存在延迟，因此在调用我的函数doSomethingWith之前不会更新this.props.userOrders。我可以设定一个暂停时间，但这似乎不是一个可持续的想法

我已经阅读了关于堆栈溢出的类似问题，并尝试在相关的地方实现这些方法，但我似乎无法让它工作。我希望我下面的代码中有人可以添加几行就可以了

以下是相关的其他文件：

actions.js

function * createUserOrder () {
  yield takeEvery('CREATE_USER_ORDER', callCreateUserOrder)
}

export function * callCreateUserOrder (newUserOrderAction) {
  try {
    const data = newUserOrderAction.data
    const newUserOrder = yield call(api.createUserOrder, data)
    yield put({type: 'CREATE_USER_ORDER_SUCCEEDED', newUserOrder: newUserOrder})
  } catch (error) {
    yield put({type: 'CREATE_USER_ORDER_FAILED', error})
  }
}

export const createUserOrder = (data) => new Promise((resolve, reject) => {
  api.post('/userOrders/', data, {headers: {'Content-Type': 'application/json'}})
    .then((response) => {
      if (!response.ok) {
        reject(response)
      } else {
        resolve(data)
      }
    })
})

导出常量createUserOrder=（数据）=>({ 键入：“创建用户订单”， 数据 })

Sagas.js

function * createUserOrder () {
  yield takeEvery('CREATE_USER_ORDER', callCreateUserOrder)
}

export function * callCreateUserOrder (newUserOrderAction) {
  try {
    const data = newUserOrderAction.data
    const newUserOrder = yield call(api.createUserOrder, data)
    yield put({type: 'CREATE_USER_ORDER_SUCCEEDED', newUserOrder: newUserOrder})
  } catch (error) {
    yield put({type: 'CREATE_USER_ORDER_FAILED', error})
  }
}

export const createUserOrder = (data) => new Promise((resolve, reject) => {
  api.post('/userOrders/', data, {headers: {'Content-Type': 'application/json'}})
    .then((response) => {
      if (!response.ok) {
        reject(response)
      } else {
        resolve(data)
      }
    })
})

Api.js

function * createUserOrder () {
  yield takeEvery('CREATE_USER_ORDER', callCreateUserOrder)
}

export function * callCreateUserOrder (newUserOrderAction) {
  try {
    const data = newUserOrderAction.data
    const newUserOrder = yield call(api.createUserOrder, data)
    yield put({type: 'CREATE_USER_ORDER_SUCCEEDED', newUserOrder: newUserOrder})
  } catch (error) {
    yield put({type: 'CREATE_USER_ORDER_FAILED', error})
  }
}

export const createUserOrder = (data) => new Promise((resolve, reject) => {
  api.post('/userOrders/', data, {headers: {'Content-Type': 'application/json'}})
    .then((response) => {
      if (!response.ok) {
        reject(response)
      } else {
        resolve(data)
      }
    })
})

订单缩减器：

case 'CREATE_USER_ORDER_SUCCEEDED':
   if (action.newUserOrder) {
      let newArray = state.slice()
      newArray.push(action.newUserOrder)
          return newArray
       } else {
       return state
   }

这感觉像是一场灾难。您不应该在任何时候“等待”组件的生命周期函数/事件处理程序，而应该利用存储的当前状态

如果我理解正确，这是您当前的流程：

您可以在React组件中调度一个动作

创建用户订单

。此操作由您的

callCreateUserOrder

saga使用。创建订单传奇完成后，它将发送另一个“已完成”的操作，您已将其作为

create\u USER\u order\u successed

现在，您应该添加适当的减速机/选择器来处理您的

创建\u用户\u订单\u成功

：

此

CREATE\u USER\u ORDER\u successed

操作应由您的reducer处理，以创建一个新状态，在该状态中填充您状态中的某些“orders”属性。这可以通过选择器直接连接到组件，此时将重新呈现组件，并填充

This.props.userOrders

---

例如：

组成部分

---

---

如果你真的需要副作用，那么将这些副作用添加到你的传奇故事中，或者创建一个新的传奇故事，以取得成功。

感谢你花时间回应。抱歉，我忘了在我的问题中添加减速器，我已经在问题的底部添加了减速器。你说的每一句话我都同意，而且我正在做。问题是this.props.userOrders更新得不够快，我在代码的下一行使用它，所以我需要“等待”知道何时使用它。希望这是有意义的。只是澄清一下，呈现更新的订单不是问题，而是在它之后直接使用this.props.userOrders做一些事情，这才是问题所在。Thanks@moinhaque你能举例说明你为什么要“等待”吗？我的意思是，你应该重新设计你的方法，这样你就不会“等待”。如果需要的话，可以使用另一个成功的故事。不要分派一个动作，并立即在组件内的相同功能中等待它。我正在使用该分派来创建一个新订单，然后我的下一步是为该订单创建付款，然后用户在应用程序内付款（因此我在组件中这样做）。不确定添加另一个传奇是否能解决这个问题，但我会仔细研究。一切都很好，但假设你有一篇文章，它应该显示验证错误或导航到另一个页面。。。并非每个结果都会触发

render（）

。。。那么如何使用分派/选择器来处理这个问题：

this.api.editObject.then（导航…）.catch（…验证错误）