MA4: App architecture, state and storage on the phone
Where state lives
🎯You'll be able to
Decide whether each piece of state belongs to a component, to the app, to the phone's storage or to the server, and keep one source of truth for each.
🏠The everyday picture
A family keeps one shopping list on the fridge. If everyone kept their own list, someone would buy milk twice and nobody would buy rice.
📘What it really is
- Component state: what only one screen needs, such as a field being typed or whether a menu is open.
- App state: what several screens need, such as the list of visits or the sync status, kept in one store and shared.
- Stored state: what must survive a restart, saved on the phone.
- Server state: what the team shares, held on the server and copied to the phone.
- One source of truth: each piece of data has one owner; others read from it rather than keeping copies that drift apart.
📝A worked example
Input: KhetNote's list and banner each count waiting changes their own way, and show different numbers.
Steps:
- Make the store's outbox the source of truth for waiting changes.
- Let the sync engine's
status()read the outbox and reportpending. - Both the banner and any other screen read
status(), so they agree.
Expected output: one number, shown the same everywhere.
🌍Where it's used
- Shopping apps keep one cart that every screen reads.
- Chat apps keep one store of messages, updated from the server.
- Settings are stored once and read by every screen.
📝Case scenario
A shopping app kept the cart count in the header and the cart in the checkout screen separately. After an item was removed at checkout, the header still said 3. Reading both from one cart store ended the mismatch.
🖱️Try it
List five pieces of state in KhetNote (for example the form's fields, the visits, the outbox, the sync status, dark mode) and say where each belongs. Success: each has one owner.
⚠️Common mistakes
- Copies that drift. Sign: two screens disagree. Fix: one owner, others read.
- Everything global. Sign: a typed letter redraws the whole app. Fix: keep local things local.
- Stored state only in memory. Sign: lost after a restart. Fix: save it on the phone.
🛠️For your project
Project 1's banner message comes from status(), which reads the outbox: one source of truth.
✅Quick check
What is a "source of truth"?
Show the answer
The one place a piece of data lives, which everything else reads from.
Where should the half-typed value of a form field live?
Show the answer
In that screen's component state (saved as a draft if it must survive interruptions).