Skip to main content

Structuring a Modern Redux App: Best Practices for File Structure #118

📖 Introduction​

Following our exploration of createAsyncThunk, this article discusses a crucial aspect of building scalable Redux applications: file structure. We will learn about the "feature-based" approach to organizing your Redux files and why it's the recommended best practice.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • The core concepts of Redux Toolkit.
  • Basic project organization in a React application.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ The "Rails-Style" vs. "Feature-Based" Approach: Understanding the two main ways to structure a Redux application.
  • ✅ The "Ducks" Pattern: A popular pattern for co-locating your Redux logic.
  • ✅ Recommended File Structure: A detailed look at the recommended file structure for a modern Redux application.

🧠 Section 1: The Core Concepts of Redux File Structure​

There are two main approaches to organizing your Redux files:

  1. "Rails-Style": Grouping files by their type (e.g., all actions in an actions folder, all reducers in a reducers folder). This can be good for small applications, but it can become hard to manage as your application grows.
  2. "Feature-Based": Grouping files by the feature they relate to (e.g., all user-related logic in a user folder, all product-related logic in a product folder). This is the recommended approach for most applications.

The "ducks" pattern is a popular implementation of the feature-based approach where you co-locate all of your Redux logic for a single feature (actions, reducers, and types) in a single file. Redux Toolkit's createSlice function makes this pattern very easy to implement.

💻 Section 2: Deep Dive - Recommended File Structure​

Here is a recommended file structure for a modern Redux application using the feature-based approach:

/src
  /app
    store.js
  /features
    /counter
      counterSlice.js
      Counter.js
    /todos
      todosSlice.js
      TodoList.js
      TodoItem.js

Step-by-Step Code Breakdown:

  1. /app: This folder contains your application-level files, such as your Redux store configuration (store.js).
  2. /features: This folder contains a sub-folder for each feature in your application.
  3. /features/counter: This is a feature folder. It contains the counterSlice.js file, which has all the Redux logic for the counter, and the Counter.js component, which is the UI for the counter.

By organizing your files this way, you can easily see all of the code related to a single feature in one place. This makes your code more modular, easier to understand, and easier to maintain.

💡 Conclusion & Key Takeaways​

In this article, we've learned about the best practices for structuring a modern Redux application. We've seen why the "feature-based" approach is the recommended best practice and how to implement it using Redux Toolkit.

Let's summarize the key takeaways:

  • The "feature-based" approach is the recommended way to structure a Redux application.
  • Redux Toolkit's createSlice function makes it easy to implement the "ducks" pattern.
  • A well-structured application is easier to understand, maintain, and scale.

Challenge Yourself: To solidify your understanding, try to refactor the to-do list application we've been building to use the feature-based file structure.

➡️ Next Steps​

You now have a solid understanding of how to structure a modern Redux application. In the next article, "Redux DevTools: Your Best Friend for Debugging (Part 1)", we will learn how to use the Redux DevTools to debug our Redux applications.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • Feature-Based Structure: A file structure where files are grouped by the feature they relate to.
  • Ducks Pattern: A pattern for co-locating all of the Redux logic for a single feature in a single file.

Further Reading​