Different effects provided by redux-saga/effects in redux saga

In Redux Saga, the redux-saga/effects module provides various methods, also known as effects, that allow you to control the flow of your sagas. Here are some commonly used methods explained with examples in simple language:

1. takeEvery:

The takeEvery effect listens for every occurrence of a specified action and runs a saga in response.

1. • Example:

        import { takeEvery } from 'redux-saga/effects';
        import { FETCH_DATA, fetchDataSuccess, fetchDataFailure } from './actions';
     
        function* fetchData() {
          // ... Saga logic
        }
     
        export function* watchFetchData() {
          yield takeEvery(FETCH_DATA, fetchData);
        }
     

     In this example, the watchFetchData saga listens for every FETCH_DATA action and triggers the fetchData saga each time.

2. takeLatest:

1. • The takeLatest effect cancels any previous instances of a saga and runs only the latest instance in response to a specified action.

     • Example:

        import { takeLatest } from 'redux-saga/effects';
        import { FETCH_DATA, fetchDataSuccess, fetchDataFailure } from './actions';
       
        function* fetchData() {
          // ... Saga logic
        }
       
        export function* watchFetchData() {
          yield takeLatest(FETCH_DATA, fetchData);
        }
       

       In this example, the watchFetchData saga listens for FETCH_DATA actions but only triggers the latest instance of the fetchData saga. It cancels any previous fetchData sagas that are still running.

3. put:

1. • The put effect dispatches an action to the Redux store.

     • Example:

        import { put } from 'redux-saga/effects';
        import { fetchDataSuccess, fetchDataFailure } from './actions';
       
        function* fetchData() {
          try {
            // ... Saga logic
            yield put(fetchDataSuccess(data));
          } catch (error) {
            yield put(fetchDataFailure(error));
          }
        }
       

       In this example, the fetchData saga uses the put effect to dispatch either a success or failure action to the Redux store, based on the result of the saga logic.

4. call:

1. • The call effect is used to invoke a function, which may return a promise, and waits for it to resolve.

     • Example:

        import { call } from 'redux-saga/effects';
        import { getUserData } from './api';
       
        function* fetchData() {
          try {
            const userData = yield call(getUserData);
            // ... Saga logic
          } catch (error) {
            // ... Error handling
          }
        }
       

       In this example, the fetchData saga uses the call effect to invoke the getUserData function, which might make an asynchronous API call. It waits for the getUserData function to resolve before proceeding with the saga logic.

5. fork:

1. • The fork effect is used to create a detached task, allowing parallel execution of sagas.

     • Example:

        import { fork } from 'redux-saga/effects';
        import { fetchData } from './sagas';
       
        export function* watchFetchData() {
          yield fork(fetchData);
        }
       

       In this example, the watchFetchData saga uses the fork effect to create a detached task that runs the fetchData saga in parallel. The fork effect does not block the execution of the parent saga.

6. select:

1. • The select effect is used to access the current state of the Redux store within a saga.

     • Example:

        import { select } from 'redux-saga/effects';
       
        function* fetchData() {
          const userId = yield select(state => state.user.id);
          // ... Saga logic
        }
       

       In this example, the fetchData saga uses the select effect to retrieve the id property from the Redux store's user slice. The select effect allows you to access specific parts of the state and use them in your saga logic.

7. take:

1. • The take effect is used to listen for a specific action or a pattern of actions.

     • Example:

        import { take, put } from 'redux-saga/effects';
        import { FETCH_DATA, fetchDataSuccess } from './actions';
       
        function* watchDataChanges() {
          while (true) {
            const action = yield take(FETCH_DATA);
            // ... Saga logic
            yield put(fetchDataSuccess(data));
          }
        }
       

       In this example, the watchDataChanges saga uses the take effect to listen for FETCH_DATA actions. Once the action is dispatched, the saga proceeds with the specified logic and dispatches a fetchDataSuccess action to the Redux store.

These are just a few examples of how effects can be used in Redux Saga. Each of these effects plays a significant role in controlling the flow of sagas, accessing the state, and listening for specific actions. By leveraging these effects, you can orchestrate complex asynchronous behavior and manage state effectively in your Redux applications.