Redux & Redux Toolkit Course
Redux & Redux Toolkit
/
Beginner

Feature-Based Structure

Definition

An organizational pattern where files are grouped by feature (e.g., Auth, Cart, Products) rather than by file type (e.g., Actions, Reducers, Components).

Explain Like I'm New

In the old days, you had an `actions` folder, a `reducers` folder, and a `components` folder. To edit the Shopping Cart, you had to open 3 different folders and jump between 3 files. Feature-based structure puts `CartComponent.js` and `cartSlice.js` together in one `features/cart/` folder.

Real World Example

The official recommendation by the Redux team. If you delete the `cart` folder, the entire cart feature is cleanly removed from the app without leaving orphaned code behind.

Common Use Cases

  • •Project organization
  • •Scaling codebases

Terminal Output

bash / terminal
/* ❌ BAD: Type-Based Structure (Hard to maintain) src/ actions/ authActions.js cartActions.js reducers/ authReducer.js cartReducer.js components/ Login.jsx Cart.jsx ✅ GOOD: Feature-Based Structure (Easy to maintain) src/ features/ auth/ Login.jsx authSlice.js cart/ Cart.jsx cartSlice.js */

Interview Questions

basic

  • What is the opposite of Feature-Based folder structure?

intermediate

  • What is the 'Ducks' pattern?

Flash Cards

Question

Opposite?

Click to reveal answer
Answer

Type-Based (or File-Type) folder structure (e.g., grouping all reducers in one folder).

Question

Ducks pattern?

Click to reveal answer
Answer

A sub-pattern of feature-based architecture where all Redux logic (actions, types, and reducers) for a specific feature is bundled into a single file, rather than split across multiple files. RTK `createSlice` inherently enforces the Ducks pattern.