Migrating from redux-thunk to redux-saga

Example of refactoring an asynchronous action from redux-thunk to redux-saga due to the changes in Redux v5.0.0.
import { takeEvery, put, call } from 'redux-saga/effects';

// Example of a fetch request using saga
function* fetchDataSaga(action) {
    try {
        const data = yield call(fetchDataFromApi, action.payload);
        yield put({ type: FETCH_DATA_SUCCESS, payload: data });
    } catch (error) {
        yield put({ type: FETCH_DATA_FAILURE, payload: error.message });

// watcher saga listens for the FETCH_DATA action
function* watchFetchData() {
    yield takeEvery(FETCH_DATA, fetchDataSaga);

export default watchFetchData;

// This assumes you have a fetchDataFromApi implemented which
// makes the API call and returns a promise.
This piece of code represents a Redux-saga saga that replaces a redux-thunk asynchronous action. It listens for a FETCH_DATA action, then calls fetchDataSaga, which attempts to load data using fetchDataFromApi function and dispatches a success or failure action.
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import watchFetchData from './sagas';

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

// mount it on the Store
const store = createStore(

// then run the saga;

export default store;
This JavaScript code sets up the Redux store, applies the redux-saga middleware, and starts the watcher saga that we defined in the previous step.