CODEWITHSUNDEEP
javascriptreactjsreduxredux-saga
user14587589
user14587589

Reputation: 459

Redux-saga call multiple functions/actions

I want to call two different functions in my sagas with different actions:

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

I've read some articles and I tried to put them in array like this :

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

But sadly it did not work, I also tried this method:

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

I also putted console.log in one of the functions to be sure if its working or not but console.log did not worked which means function is not being called

But this also did not work. Could you help me to solve this problem?

Upvotes: 0

Views: 1796

Answers (2)

Hassan Ali Shahzad
Hassan Ali Shahzad

Reputation: 2724

for multiple in one file you have to do something like following:

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);
}

and in main saga index file import like that:

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

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

Upvotes: 0

Aleksey L.
Aleksey L.

Reputation: 37938

You can use 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)
])

Upvotes: 1

Related Questions