redux-saga中嵌套函数内的调度动作

Question

[当用户提交表单时，我希望使用多种模式来提示他们。

基本结构：我的应用程序设置为要显示模态，您要做的就是调度一个动作，该动作的主体为该动作的有效载荷。

dispatch({type: SHOW_MODAL, payload: <MyModal />})

[当用户提交表单时，将调度由传奇执行的动作，因此现在我们处于传奇领域。我想做的是在表单实际提交给后端之前，先向用户显示几个模式。

// mySaga.js

function* submitForm() {
  // show a modal
  // then show another modal
  // then submit the form
}

最佳方法是什么？对我来说最有意义的是使用诺言。

// mySaga.js
function* submitForm() {
 yield call(() => {
   new Promise( resolve => {
     yield put({type: SHOW_MODAL, payload: <MyModal onClick={resolve} />})
   })
 })
 ...
 // add as many more modals as I'd like
 ...
 yield call(myApiCall)
}

上面的问题是，您不能在那个promise函数内部使用yield，因为它不是生成器。我需要的是一种在传奇中正常分发动作的方法，但是在整个Internet上看起来似乎并不微不足道。

我是否缺少有关萨加斯的东西？最好的方法是什么？

Answer 1

我建议稍微改变一下程序。

分发<Modal/>组件进行存储不是一个好主意。尽管您可以在组件内部存储组件，但是很难将正确的props传递给组件。

我建议存储一个变量，例如firstModalOpened，它将控制是否显示模式。您可以在传奇中设置此变量，然后等待更改此变量的操作。

// mySaga.js
function* submitForm() {
  yield put({type: SHOW_MODAL, firstModalOpened: true});
  take('FIRST_MODAL_CLOSED');   // Await for modal close action
   ...
  // add as many more modals as I'd like
   ...
  yield call(myApiCall)
}

在React中，<Modal/>组件可以按如下方式使用

<Modal open={props.firstModalOpened} onClose={() => dispatch({type: 'FIRST_MODAL_CLOSED'})}/>

如果您有几个同时打开的模态，则可以多次调用put，然后等待所有关闭操作到达，然后再继续进行yield call(myApiCall)

yield put({type: SHOW_MODAL, firstModalOpened: true});
yield put({type: SHOW_MODAL, secondModalOpened: true});
yield all([
  take('FIRST_MODAL_CLOSED')
  take('SECOND_MODAL_CLOSED')
]);