Stale By Design
A small NgRx tool for cache invalidation across features — one status field, one dependency list, one shared subscription. Flow: an unrelated action fires → status moves to stale → on next mount, the component reloads the data and status returns to fresh . The problem Imagine your app has a boards list, cached in the store — loaded once, and reused everywhere. Then someone renames a team member,…
The article discusses a small NgRx tool designed for cache invalidation across features, aiming to maintain data freshness without unnecessary refetching. The core concept revolves around marking data as stale or fresh in a single status field, ensuring that refetching only occurs when explicitly needed. By separating the tasks of marking data stale and refetching, the solution avoids the pitfalls of forcing full reloads for unrelated data changes or scattering manual refetch calls across various features.
This approach involves four key components: status, dependencies, loading strategy, and activation. The status field, with states like idle, stale, loading, fresh, and error, ensures that only when a component activates does it initiate data loading, preventing unnecessary work when no components are watching. The benefits include a cleaner separation of concerns, reduced coupling between features, and automatic cleanup.
However, the pattern also has trade-offs, such as the need to ensure proper implementation of the dependencies and the potential for outliving subscriptions requiring additional lines of code to prevent issues.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
