Redux & Redux Toolkit Course
Redux & Redux Toolkit
/
Intermediate

State Tree

Definition

The single plain JavaScript object that holds the entire state of your Redux application.

Explain Like I'm New

The final shape of your massive spreadsheet. When you plan a Redux app, you literally draw out what this giant JSON object is going to look like. It contains nested objects and arrays for every piece of data your app needs.

Real World Example

Logging `store.getState()` in the console and seeing a massive nested object with `auth`, `products`, `ui`, and `settings` branches.

Common Use Cases

  • •Architecting application data flow

Interactive Example

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

Interview Questions

basic

  • Should you store functions or React Components inside the State Tree?

intermediate

  • What does it mean to 'normalize' the State Tree?

Flash Cards

Question

Store functions?

Click to reveal answer
Answer

NO! The State Tree must contain ONLY serializable data (Strings, Numbers, Arrays, plain Objects). Functions, Promises, and UI Components will break Redux's time-travel debugging.

Question

Normalize?

Click to reveal answer
Answer

Structuring your data like a relational database (flat tables using IDs to reference each other) rather than deeply nesting arrays inside of arrays. It makes updating data massively faster.