Redux-saga 调用多次 functions/actions

Question

我想在我的 sagas 中用不同的操作调用两个不同的函数：

export default function* () {
  yield takeLatest(actionTypes.ADD_ACCOUNT, addAccountSaga);
  yield takeLatest(actionTypes.GET_WALLET, getBalanceSaga);
}

我读过一些文章，我试着把它们放在这样的数组中：

yield [(
  takeLatest(actionTypes.ADD_ACCOUNT, addAccountSaga), 
  takeLatest(actionTypes.GET_WALLET, getBalanceSaga)
)];

可惜没有用，我也试过这个方法：

yield * takeLatest(actionTypes.ADD_ACCOUNT, addAccountSaga);
yield * takeLatest(actionTypes.GET_WALLET, getBalanceSaga);

我还在其中一个函数中加入了 console.log 来确定它是否工作，但是 console.log 没有工作，这意味着函数没有被调用

但这也没有用。你能帮我解决这个问题吗？

Answer 1

您可以使用all effect combinator

Creates an Effect description that instructs the middleware to run multiple Effects in parallel and wait for all of them to complete

yield all([
  takeLatest(actionTypes.ADD_ACCOUNT, addAccountSaga), 
  takeLatest(actionTypes.GET_WALLET, getBalanceSaga)
])

Answer 2

对于一个文件中的多个文件，您必须执行如下操作：

export function* getShirtPlans() {
  try {
    const response = yield call(API.apiGetShirtPlans);
    yield put(ACTIONS.setShirtPlans(response.data.data.intervals));
  } catch (err) {
    console.log(err);
  }
}

export function* getShirtStyles() {
  try {
    const response = yield call(API.apiGetShirtStyles);
    console.log(response.data.data);
    yield put(ACTIONS.setShirtStyles(response.data.data));
  } catch (err) {
    console.log(err);
  }
}

export function* watchOngetShirtPlans() {
  yield takeLatest(TYPES.GET_SHIRTS_PLANS, getShirtPlans);
}

export function* watchOngetShirtStyles() {
  yield takeLatest(TYPES.GET_SHIRTS_STYLES, getShirtStyles);
}

并在主 saga 索引文件中像这样导入：

import { fork, all } from "redux-saga/effects";
import { watchOngetShirtPlans, watchOngetShirtStyles } from "../sagas/ShirtsSaga";

export function* watchSagas() {
  yield all([
    fork(watchOngetShirtPlans),
    fork(watchOngetShirtStyles)
  ]);
}

Redux-saga 调用多次 functions/actions

Redux-saga call multiple functions/actions

javascript

reactjs

redux

redux-saga