Handling Side Effects with Redux-Saga in v5.0.0

Update a Redux-Saga example to handle side effects in a Redux v5.0.0 application.

import { put, takeLatest } from 'redux-saga/effects';
import { FETCH_DATA_REQUEST, fetchDataSuccess, fetchDataFailure } from './actions';

// Worker saga will be fired on FETCH_DATA_REQUEST action
function* fetchDataSaga(action) {
  try {
    const data = yield call(Api.fetchData, action.payload);
    // dispatch a success action to the store with the new data
    yield put(fetchDataSuccess(data));
  } catch (error) {
    // dispatch a failure action to the store with the error
    yield put(fetchDataFailure(error.message));
  }
}

// Starts worker saga on latest dispatched `FETCH_DATA_REQUEST` action.
// Allows concurrent fetches of data.
function* mySaga() {
  yield takeLatest(FETCH_DATA_REQUEST, fetchDataSaga);
}

export default mySaga;

This JavaScript code defines Redux-Saga effects for handling side effects. The `fetchDataSaga` generator function listens for the `FETCH_DATA_REQUEST` action, then calls an API function to fetch data. If the API call succeeds, the `fetchDataSuccess` action is dispatched with the data; if it fails, the `fetchDataFailure` action is dispatched with the error message. The `mySaga` function ensures that the application listens for the latest `FETCH_DATA_REQUEST` action and calls the worker saga accordingly. This code should be integrated with a Redux setup including actions and reducers.

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import reducer from './reducers';
import mySaga from './sagas';

// Create the saga middleware
const sagaMiddleware = createSagaMiddleware();

// Mount it on the Store
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
);

// Then run the saga
sagaMiddleware.run(mySaga);

// Render the application
// ...

This code snippet is used for setting up the Redux store and integrating Redux-Saga middleware. It begins by importing the necessary functions from 'redux' and 'redux-saga'. Then, it creates the saga middleware and applies it to the store during its creation process. Once the store is created, the 'run' method of the saga middleware is called to start the previously defined sagas. The reducers are assumed to be defined in a separate file, and the application's rendering logic will follow.

// Action types
export const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
export const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';

// Action creators
export function fetchDataRequest(params) {
  return { type: FETCH_DATA_REQUEST, payload: params };
}

export function fetchDataSuccess(data) {
  return { type: FETCH_DATA_SUCCESS, payload: data };
}

export function fetchDataFailure(message) {
  return { type: FETCH_DATA_FAILURE, payload: message };
}

This JavaScript code defines the action types and action creators for fetching data within a Redux application. The action types represent the different states of a data fetch operation: request, success, and failure. The action creators are functions that return the corresponding action type and payload - they will be called to initiate a data fetch, handle successful data retrieval, and handle errors, respectively.