The Importance of a Good Folder Structure in React & Redux Toolkit Projects

Gary Rosenberry, Senior Software Developer, NGS

Gary is an experienced Software Engineer with a demonstrated history of working in the computer software industry. Skilled in Go, Java, JavaScript, Spring, React/Redux, and SQL, with a Bachelor's degree in Computer Science from Shippensburg University of Pennsylvania.

Introduction

As a full-stack developer since November 2016, I've had the opportunity to work on a variety of custom web application solutions across different tech stacks. In recent years, I've shifted my focus toward leading front-end development efforts, primarily working with React. My experience spans Java, Go, and JavaScript, but my main expertise lies in building and maintaining React-based projects.

For the past four years, Redux has been my go-to tool for managing and organizing application state, and more recently, Redux Toolkit has become an essential part of my workflow. One of the most overlooked yet crucial aspects of working with these technologies is establishing a scalable and maintainable folder structure. A well-organized project can make a significant difference in code maintainability, collaboration, and long-term scalability.

In this article, I'll share an example of structuring a React application using Redux Toolkit effectively. While this is not the only way to organize a project, it provides a solid foundation that can be adapted to different needs.

Why Folder Structure Matters

A poorly designed or inconsistent folder structure leads to wasted time and unnecessary confusion. Without clear guidelines, developers might struggle to find files, leading to delays and inefficiencies. More importantly, a lack of organization can make it difficult to understand how different parts of the application interact, increasing the risk of introducing bugs and technical debt.

The Benefits of a Well-Organized Project

• Faster Development: Developers can quickly locate files and follow predictable patterns, making it easier to add new features or modify existing ones.
• Reduced Complexity: Keeping related files together minimizes cross-file dependencies, reducing unexpected side effects.
• Easier Collaboration: A clear structure ensures that new team members can onboard quickly without needing excessive guidance.

Core Principles of a Good Folder Structure

A well-structured project should be logical, scalable, and easy to navigate.

src/
  app/
    App.tsx
    store.ts
  features/
    auth/
      components/
        AuthForm.tsx
      authSlice.ts
    dashboard/
      components/
        Dashboard.tsx
      dashboardSlice.ts

Feature-Based Organization

Instead of organizing files solely by type (e.g., a global components/ or redux/ folder), structure them around distinct features. This method ensures that each feature is self-contained, making it easier to update or remove functionality without affecting unrelated parts of the application.

API Folder with RTK Query

To manage API interactions efficiently, we separate API logic into its own folder. This allows me to code-split the API and re-use these pieces across features.

src/
  api/
    api.ts
    authApi.ts
    dashboardApi.ts

Base API Setup (api.ts)

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: () => ({}), // Additional endpoints are injected separately
});

Injecting Feature-Specific Endpoints (authApi.ts)

import { api } from './api';

export const authApi = api.injectEndpoints({
  endpoints: (builder) => ({
    login: builder.mutation({
      query: (credentials) => ({
        url: '/auth/login',
        method: 'POST',
        body: credentials,
      }),
    }),
  }),
});

export const { useLoginMutation } = authApi;

This approach allows us to add API endpoints dynamically, keeping the code modular and easier to manage.

Common Folder for Shared Logic

To avoid redundant code, we place reusable logic inside a common/ directory, shared hooks, utility functions, and reusable components.

src/
  common/
    hooks/
      useAuth.ts
      useDebounce.ts
    utils/
      dateFormatter.ts
      apiHelper.ts
    components/
      Button.tsx
      Modal.tsx

Caution When Editing common/

Since shared logic affects multiple parts of the application, updates should be handled carefully:

• Test thoroughly before modifying shared hooks, utilities, or components.
• Communicate changes to ensure all developers are aware of updates.
• Maintain backward compatibility whenever possible.

Final Thoughts

A good folder structure isn't about following rigid rules. It's about creating a setup that makes your project scalable, maintainable, and easy to navigate. By adopting a feature-based organization, a modular API layer, and a structured common folder, you can reduce technical debt, improve collaboration, and boost development efficiency.