Redux & Redux Toolkit Course
Redux & Redux Toolkit
/
Advanced

Domain Driven Design

Definition

Structuring Redux state slices based on the business domain (the real-world entities the app is tracking) rather than the UI layout (the pages on the screen).

Explain Like I'm New

Don't create a `homePageSlice` and a `settingsPageSlice`. A 'User' exists on both pages. If you update the User on the Settings page, the Home page won't update because it's looking at its own slice. Create a `userSlice` (the Domain). Both pages look at the exact same Domain slice.

Real World Example

An HR application. The domains are `Employees`, `Payroll`, and `Benefits`. These are the slices. The UI pages (`Dashboard`, `Reports`) simply read from these domain slices.

Common Use Cases

  • •Data consistency across multiple views

Interactive Example

Loading...
Console output will appear here...

Interview Questions

basic

  • If you have a 'Checkout Page', should you create a `checkoutPageSlice`?

intermediate

  • What happens if two different UI pages need to display the exact same Domain data, but sorted differently?

Flash Cards

Question

Create checkoutPageSlice?

Click to reveal answer
Answer

No. You should have a `cartSlice` and an `authSlice`. The Checkout Page reads from both domains. The only time a 'Page Slice' is acceptable is for purely UI-specific state (like which tab is currently active on that specific page).

Question

Sorted differently?

Click to reveal answer
Answer

The Redux Domain slice stores ONE raw, unsorted list. You create two different Memoized Selectors (`selectUsersSortedByName`, `selectUsersSortedByDate`). Each page imports the specific selector it needs.