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