Practical Redux Saga Patterns: A Production-Ready Approach

In today's React ecosystem, while Redux Toolkit and RTK Query are often recommended for state management, Redux Saga continues to be a powerful tool for managing complex side effects. Based on production experience, I'd like to share some battle-tested patterns that make Redux Saga more maintainable and scalable.

Note: The complete source code for the example Todo application discussed in this article is available on GitHub at this repo. Feel free to use it as a reference implementation of these patterns.

Key Patterns We'll Cover

1. Redux Saga Routines for standardized action handling

2. Structured selectors for efficient state access

3. Type-safe Redux setup with TypeScript

4. Centralized API error handling

Redux Saga Routines: Streamlining Action Management

One of the most powerful patterns we've implemented is using redux-saga-routines. This library provides a approach to handling actions in a consistent way. By using Redux Saga Routines, we can define a routine for each asynchronous operation, which simplifies the process of managing different action types like request, success, and failure. This leads to cleaner and more maintainable code. way to handle the complete lifecycle of asynchronous actions.

import { createRoutine } from 'redux-saga-routines';

export const getAllTodos = createRoutine('TODO_GET_ALL');
export const createTodo = createRoutine('TODO_CREATE');

Each routine automatically creates five action types:

• TRIGGER: Initiates the saga

• REQUEST: Indicates the start of the API call

• SUCCESS: Handles successful responses

• FAILURE: Manages errors

• FULFILL: Cleanup operations

Benefits of Using Routines:

1. Consistent action structure across the application

2. Reduced boilerplate code

3. Built-in loading and error states

4. Predictable action flow

Type-Safe Reducer Pattern with Immer

Our reducer pattern combines TypeScript with Immer for immutable state updates:

import { produce } from 'immer';

export default (state = initialState, action: TodoAction) =>
  produce(state, (draft: TodoState) => {
    switch (action.type) {
      case getAllTodos.TRIGGER:
        draft.isLoading = true;
        draft.error = null;
        break;

      case getAllTodos.SUCCESS:
        if (action.payload?.data?.todos) {
          draft.todos = action.payload.data.todos;
        }
        break;
    }
  });

This pattern provides:

• Type safety throughout the reducer

• Immutable state updates with mutable syntax

• Cleaner, more maintainable code

Selector Pattern: Efficient State Access

We implement a robust selector pattern using Reselect:

import { createSelector, createStructuredSelector } from 'reselect';

const getTodoState = (state: RootState): TodoState => state.todo;

export const getTodos = createSelector(
  [getTodoState],
  (todoState: TodoState) => todoState.todos
);


// usage in components
const stateSelector = createStructuredSelector({
  todos: getTodos,
  isLoading: getIsLoading,
  error: getError
});

Advantages of This Selector Pattern:

1. Memoized selections prevent unnecessary re-renders

2. Centralized state access logic

3. Easy composition of complex selectors

4. Type-safe state access

Saga Implementation Pattern

Our saga pattern focuses on clean error handling and consistent action flow:

function* getAllTodosRequest() {
  try {
    yield put(getAllTodos.request());
    const response: GetTodosResponse = yield call(api, 'GET');

    if (response.success) {
      yield put(getAllTodos.success({ data: { todos: response.data } }));
    } else {
      yield put(getAllTodos.failure({ message: response.message }));
    }
  } catch (error) {
    yield put(getAllTodos.failure({
      message: error.response?.data?.message || 'Failed to fetch todos'
    }));
  } finally {
    yield put(getAllTodos.fulfill());
  }
}

Key aspects of this pattern:

1. Consistent error handling

2. Type-safe API responses

3. Clear separation of concern

4. Predictable action flow

Best Practices and Tips

1. Centralize API Logic: Keep API calls in a separate service layer for better maintainability.

2. TypeScript Integration: Use TypeScript for better type safety and developer experience.

3. Error Handling: Implement consistent error handling patterns across all sagas.

4. State Structure: Keep your state normalized and flat for better performance.

5. Action Naming: Use consistent action naming conventions throughout the application.

Conclusion

While newer alternatives exist, Redux Saga remains a powerful tool for managing complex side effects in React applications. By implementing these patterns, you can create a more maintainable and scalable application architecture. The combination of Redux Saga Routines, TypeScript, and structured selectors provides a robust foundation for complex React applications.

The patterns discussed here have been battle-tested in production environments and have proven to be effective in managing application state and side effects. They provide a good balance between flexibility and structure, making it easier to maintain and scale your applications.

Notable Open Source Codebases Using Redux Saga

If you're looking for real-world examples of Redux Saga in production applications, here are some notable open-source projects that showcase its effective use:

1. Appsmith: Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API. One of the biggest open source project which uses redux saga extensively across the code for managing state. Repo Link

2. WordPress Calypso: The web interface for WordPress.com uses Redux Saga extensively for managing complex workflows and API interactions. Repo Link

3. React-Boilerplate: One of the most popular React boilerplates that demonstrates excellent Redux Saga patterns. Repo Link

4. SAAS React Starter Kit Boilerplate: An old SAAS boilerplate that demonstrates the usage of redux saga for managing state. Repo Link

5. Open Edx - payment app: Microfrontend for the single-page payment/checkout process used by Open edX project. Repo Link

Other resources

1. Complete example code: Github repo

2. Source code of a redux saga course: Github repo

3. Redux Saga official documentation: redux-saga.js.org

4. Redux Saga Routines: github.com/afitiskin/redux-saga-routines

5. Reselect: https://github.com/reduxjs/reselect

6. Blog post on redux actions: https://hackernoon.com/handling-loading-actions-the-proper-way-in-redux-t3k36e8