When building web applications, dealing with tasks that take time is a common challenge. Redux, a powerful state management library, offers two popular solutions for managing these tasks: redux-saga and redux-promise-middleware. In this beginner-friendly guide, we'll explore how these libraries compare in handling various asynchronous scenarios.

1. Understanding Synchronous Actions

Before diving into asynchronous operations, let's understand how both redux-saga and redux-promise-middleware handle regular, synchronous actions.

Normal (Sync) Action with redux-saga:

// Using redux-saga to handle a normal action
function* watchNormalAction() {
  while (true) {
    yield take('NORMAL_ACTION');
    // Perform any synchronous task
  }
}

// In the root saga
function* rootSaga() {
  yield all([
    watchNormalAction(),
    // Other sagas
  ]);
}

Normal (Sync) Action with redux-promise-middleware:

// Using redux-promise-middleware to handle a normal action
const normalAction = () => ({
  type: 'NORMAL_ACTION',
  payload: {},
});

// Reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'NORMAL_ACTION_PENDING':
      // Handle pending state
    case 'NORMAL_ACTION_FULFILLED':
      // Handle success state
    case 'NORMAL_ACTION_REJECTED':
      // Handle error state
  }
}

2. Dealing with a Single Promise

Let's move on to a common scenario: handling a single asynchronous operation using a promise.

Single Promise with redux-saga:

// Using redux-saga to handle a single promise
function* fetchData() {
  try {
    const data = yield call(api.fetchData);
    yield put({ type: 'FETCH_SUCCESS', payload: data });
  } catch (error) {
    yield put({ type: 'FETCH_ERROR', payload: error });
  }
}

Single Promise with redux-promise-middleware:

// Using redux-promise-middleware to handle a single promise
const fetchData = () => ({
  type: 'FETCH_DATA',
  payload: api.fetchData(),
});

// Reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_FULFILLED':
      // Handle success state
    case 'FETCH_DATA_REJECTED':
      // Handle error state
  }
}

3. Optimistic Actions and Requests

When you want to perform an action optimistically, expecting it to succeed, both libraries can help.

Optimistic Action with redux-saga:

// Using redux-saga to handle an optimistic action
function* updateUser(action) {
  const { id, data } = action.payload;
  yield put({ type: 'OPTIMISTIC_UPDATE', payload: { id, data } });
  try {
    yield call(api.updateUser, id, data);
    yield put({ type: 'UPDATE_SUCCESS', payload: { id, data } });
  } catch (error) {
    yield put({ type: 'UPDATE_ERROR', payload: { id, error } });
  }
}

Optimistic Action with redux-promise-middleware:

// Using redux-promise-middleware for an optimistic action
const updateUser = (id, data) => ({
  type: 'UPDATE_USER',
  payload: api.updateUser(id, data),
  meta: { id, data },
});

// Reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_USER_FULFILLED':
      // Handle success state
    case 'UPDATE_USER_REJECTED':
      // Handle error state
  }
}

4. Handling Multiple Independent Promises

When dealing with multiple asynchronous operations that can happen independently, both libraries have their approaches.

Multi Promise (Independent) with redux-saga:

// Using redux-saga to handle multiple independent promises
function* fetchDataList() {
  const [data1, data2] = yield all([call(api.fetchData1), call(api.fetchData2)]);
  yield put({ type: 'FETCH_LIST_SUCCESS', payload: { data1, data2 } });
}

Multi Promise (Independent) with redux-promise-middleware:

// Using redux-promise-middleware to handle multiple independent promises
const fetchDataList = () => ({
  type: 'FETCH_DATA_LIST',
  payload: Promise.all([api.fetchData1(), api.fetchData2()]),
});

// Reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_LIST_FULFILLED':
      // Handle success state
    case 'FETCH_DATA_LIST_REJECTED':
      // Handle error state
  }
}

5. Managing Dependent Multi Promises

When multiple promises depend on each other or need to be processed sequentially, redux-saga provides a more flexible solution.

Multi Promise (Dependent) with redux-saga:

// Using redux-saga to handle dependent multi promises
function* fetchThenUpdate() {
  const data = yield call(api.fetchData);
  yield put({ type: 'FETCH_SUCCESS', payload: data });
  yield call(api.updateData, data);
}

6. Customizing Error and Success Messages

Both libraries offer ways to customize error and success messages.

Custom Messages with redux-saga:

// Using redux-saga to customize error/success messages
function* watchActionsWithMessage() {
  while (true) {
    const action = yield take(['SUCCESS_ACTION', 'ERROR_ACTION']);
    const message = action.type === 'SUCCESS_ACTION' ? 'Operation succeeded' : 'Operation failed';
    yield put({ type: 'SHOW_MESSAGE', payload: message });
  }
}

Custom Messages with redux-promise-middleware:

// Customizing messages with redux-promise-middleware
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SUCCESS_ACTION_FULFILLED':
      return { ...state, message: 'Operation succeeded' };
    case 'ERROR_ACTION_REJECTED':
      return { ...state, message: 'Operation failed' };
    default:
      return state;
  }
}

Conclusion

Understanding the differences between redux-saga and redux-promise-middleware can be a bit overwhelming for beginners. In simpler terms, if you're just getting started with Redux and want a straightforward way to manage async tasks, redux-promise-middleware provides a more structured approach. On the other hand, if you're comfortable with Redux and want more control and flexibility, redux-saga offers advanced capabilities for handling complex scenarios.

Remember, both tools exist to simplify the complexity of asynchronous tasks. Your choice should reflect your project's requirements, your familiarity with these tools, and your team's preferences. Happy coding and exploring the world of Redux!