Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon can you provide more examples of using fork and join in Redux Saga


can you provide more examples of using fork and join in Redux Saga


Here are some examples of using `fork` and `join` in Redux Saga:

Example 1: Using `fork` to Run Tasks in Parallel

javascript
import { fork, call, put } from 'redux-saga/effects';
import api from './somewhere/api';
import { receiveData } from './somewhere/actions';

function* fetchAll() {
  const task1 = yield fork(fetchResource, 'users');
  const task2 = yield fork(fetchResource, 'comments');
  yield delay(1000);

  function* fetchResource(resource) {
    const { data } = yield call(api.fetch, resource);
    yield put(receiveData(data));
  }
}

Example 2: Using `join` to Wait for Forked Tasks

javascript
import { fork, join, call, put } from 'redux-saga/effects';
import api from './somewhere/api';
import { receiveData } from './somewhere/actions';

function* fetchAll() {
  const task1 = yield fork(fetchResource, 'users');
  const task2 = yield fork(fetchResource, 'comments');
  const result1 = yield join(task1);
  const result2 = yield join(task2);

  function* fetchResource(resource) {
    const { data } = yield call(api.fetch, resource);
    yield put(receiveData(data));
  }
}

Example 3: Using `fork` and `join` in a Saga

javascript
import { fork, join, call, put } from 'redux-saga/effects';
import api from './somewhere/api';
import { receiveData } from './somewhere/actions';

function* fetchAll() {
  const task1 = yield fork(fetchResource, 'users');
  const task2 = yield fork(fetchResource, 'comments');
  yield delay(1000);

  function* fetchResource(resource) {
    const { data } = yield call(api.fetch, resource);
    yield put(receiveData(data));
  }

  const result1 = yield join(task1);
  const result2 = yield join(task2);
}

Example 4: Using `fork` and `join` in a Saga with Error Handling

javascript
import { fork, join, call, put, take } from 'redux-saga/effects';
import api from './somewhere/api';
import { receiveData } from './somewhere/actions';

function* fetchAll() {
  const task1 = yield fork(fetchResource, 'users');
  const task2 = yield fork(fetchResource, 'comments');
  yield delay(1000);

  function* fetchResource(resource) {
    try {
      const { data } = yield call(api.fetch, resource);
      yield put(receiveData(data));
    } catch (error) {
      yield put({ type: 'FETCH_ERROR', message: error.message });
    }
  }

  const result1 = yield join(task1);
  const result2 = yield join(task2);
}

Example 5: Using `fork` and `join` in a Saga with Cancellation

javascript
import { fork, join, call, put, take, cancel } from 'redux-saga/effects';
import api from './somewhere/api';
import { receiveData } from './somewhere/actions';

function* fetchAll() {
  const task1 = yield fork(fetchResource, 'users');
  const task2 = yield fork(fetchResource, 'comments');
  yield delay(1000);

  function* fetchResource(resource) {
    try {
      const { data } = yield call(api.fetch, resource);
      yield put(receiveData(data));
    } catch (error) {
      yield put({ type: 'FETCH_ERROR', message: error.message });
    }
  }

  const result1 = yield join(task1);
  const result2 = yield join(task2);

  // Cancel tasks
  yield cancel(task1);
  yield cancel(task2);
}

These examples demonstrate how to use `fork` and `join` to manage concurrent tasks in Redux Saga, including parallel execution, error handling, and cancellation.

Citations:
[1] https://redux-saga.js.org/docs/advanced/ForkModel/
[2] https://www.youtube.com/watch?v=x5_9_PSlVYo
[3] https://github.com/redux-saga/redux-saga/issues/1292
[4] https://borstch.com/snippet/managing-concurrent-tasks-with-fork-and-join
[5] https://github.com/redux-saga/redux-saga/issues/211