React Native redux-saga：yield all中能否执行多个put action

问题背景 #

目前我编写了一段接口请求逻辑：发起API调用后，根据返回结果分为两类分支处理：

• OK（请求成功）
• Error（请求失败）

由于存在间歇性网络连接问题，我需要为已触发的事件创建独立的待处理记录做本地存储，供后续流程使用。现有代码实现如下：

const response = yield call(api.login, credentials)

yield all(
            response.matchWith({
                Ok: ({ value }) => {
                    
                    put(Actions.pendingRecord(null))
                    return put(Actions.apiSuccess(value))
                },
                Error: ({ value }) => {
                    
                    const pendingRecord = {
                        value: true,
                        data: {
                            event: "queue"
                            
                        }
                    }
    
                    put(Actions.pendingRecord(pendingRecord))
                    return put(Actions.apiFailure(value))

                }
            })
        )

核心疑问：调用yield all时，是否支持同时执行多个put action？疑问对应的写法示例如下：

put(Actions.pendingRecord(null))
return put(Actions.apiSuccess(value))

解答 #

你当前的写法是无效的，put本质是创建一个普通的effect描述对象，只有把这个对象返回给saga执行器（也就是yield或者return给saga调用链）才会被实际执行。你现在写的第一行put(Actions.pendingRecord(null))只是创建了对象但没有传递给执行器，等于无效代码，不会触发任何action。

yield all本身完全支持并行执行多个put action，只要你把需要执行的多个put effect以数组形式传入即可。结合你当前的代码结构，只需要在每个分支里返回多个put组成的数组，all就会自动并行调度所有effect，修改后的正确代码如下：

const response = yield call(api.login, credentials)

yield all(
  response.matchWith({
    Ok: ({ value }) => {
      return [
        put(Actions.pendingRecord(null)),
        put(Actions.apiSuccess(value))
      ]
    },
    Error: ({ value }) => {
      const pendingRecord = {
        value: true,
        data: {
          event: "queue"
        }
      }
      return [
        put(Actions.pendingRecord(pendingRecord)),
        put(Actions.apiFailure(value))
      ]
    }
  })
)

这种写法下两个put会被同时触发执行，没有先后阻塞，完全满足你同时更新待处理记录、派发接口结果action的需求。

内容的提问来源于stack exchange，提问作者Dave