在 redux-saga 的嵌套函数中调度动作答案

【问题标题】：dispatching actions within nested functions in redux-saga在 redux-saga 的嵌套函数中调度动作
【发布时间】：2020-01-27 22:07:16
【问题描述】：

当用户提交表单时，我希望他们收到多个模式的提示。

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

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

当用户提交表单时，saga 会发送一个动作，所以现在我们处于 saga 领域。我想做的是让用户在表单实际提交到后端之前依次显示几个模式。

// mySaga.js

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

这样做的最佳方法是什么？对我来说最有意义的是使用 Promise。

// 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，因为它不是生成器。我所需要的只是一种在 saga 中正常调度动作的方法，但在整个互联网上看起来一点都不简单。

我是否错过了有关 sagas 的内容？最好的方法是什么？

【问题讨论】：

标签： reactjs redux redux-saga

【解决方案1】：

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

dispatch <Modal/> 组件来存储不是一个好主意。虽然您可以将组件存储在 store 中，但是很难将正确的props 传递给组件。

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

// 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')
]);

【讨论】：