reactjs - 从一个 redux-saga 调用两种不同的 Action 类型

Question

我现在已经能够完成基本的 sagas 实现，但我的应用程序变得有点复杂了。我为异步功能选择了 sagas，但似乎误解了事情的工作原理。

我的应用程序中有一个全局搜索输入，需要进行两个不同的 api 调用(不同的数据对象)，但搜索输入也有它自己的加载状态，基于 api 调用的搜索/状态。基于此信息，这是应用程序的流程:

搜索发生(发送操作 GLOBAL_SEARCH_REQUEST )

GLOBAL_SEARCH_REQUEST 的传奇观察者开始(将输入的加载设置为真)

在那个传奇中 - 调用电话以获取与搜索查询匹配的所有用户/订阅

成功时，将输入的加载设置为 false

失败时，设置错误

全局搜索请求传奇

function* globalSearchRequestSaga(action) {
  const { query } = action
  console.log(`searching subscriptions and users for : ${query}`)
  try {
    yield put(fetchUsersRequest(query))
    // call for the subscriptions (leaving it out for simplicity in this example)
    yield put(globalSearchSuccess(query))
  } catch (error) {
    console.log(`error: ${error}`)
    yield put(globalSearchFailure(error.message))
  }
}

fetch users saga 的样子

export function* fetchUsersRequestSaga(action) {
  const { query } = action
  const path = `${root}/users`
  try {
    const users = yield axios.get(path, { crossDomain: true })
    yield put(fetchUsersSuccess(query, users.data))
  } catch (error) {
    console.log(`error : ${error}`)
    yield put(fetchUsersFailure(query, error.message))
  }
}

(非常基础)

如果我这样做，就会出现 GLOBAL_SEARCH_SUCCESS 的问题。操作在用户请求完成之前执行(如果我也添加了订阅 api 调用，我想同样的事情)。我找到的一种解决方案是，如果我换行

yield put(fetchUsersRequest(query))

到

yield call(fetchUsersRequestSaga, fetchUsersRequest(query))

在哪里 fetchUsersRequestSaga是上面的传奇，fetchUsersRequest(query)是获取用户的 Action 创建者。这会导致 asnyc 功能起作用，并且 GLOBAL_SEARCH_SUCCESS等待用户返回(正确行为)。

唯一的问题是 FETCH_USERS_REQUEST操作不再记录到商店。

我想知道是否有办法让它正确地登录到商店，或者返回到我以前的实现，并在 put(fetchUsersRequest(query)) 上进行适当的阻止。

Answer 1

put函数是一个非阻塞 Action 。它不会等到 promise/api 请求解决。

我建议你直接调用 sagas 而不是调度 Action 。

try {
   yield call(fetchUsersRequestSaga, query);
   yield call(globalSearchSaga, query); // or whatever its called
}

call是一个阻塞 Action 。它会等到请求完成，所以如果你的调用都将按正确的顺序执行。