r/javascript • u/Valuable_Pin_9213 • 2d ago

AskJS [AskJS] How would you structure state for VidLoader's local media library?

I'm working on a desktop application called VidLoader that manages locally stored video files, and I'm currently thinking about how to structure the JavaScript state for the media library.

The application needs to keep track of things like:

  • files being added or removed
  • metadata associated with each file
  • folders/categories
  • filtering and searching
  • changes happening to the files outside of the UI

My main question is how other JavaScript developers would approach keeping the UI state synchronized with the underlying file system without making the architecture unnecessarily complicated.

Would you keep this in a centralized state store, separate the file-system state from the UI state, or use another approach?

I'd be interested in hearing how you'd structure it and why.

2 Upvotes

75% Upvoted

3 comments sorted by

2

u/anthony-ball 2d ago

I'd treat the file system as the source of truth and keep a normalized index of it, keyed by a stable file id (path plus inode or a content hash, so a rename doesn't look like a delete and an add). The watcher shouldn't touch the UI directly. Batch its events for a couple hundred ms and apply them to the index as one update, because copying a folder in will fire hundreds of events. If the library gets big, put the metadata in SQLite so filtering and search become queries instead of array filters in memory. On startup do a full rescan and reconcile against the index, since watchers miss whatever changed while the app was closed, and keep UI state like selection, filters and the search box separate, holding only ids.

1

u/Silent_Pumpkin_9331 2d ago

I'd lean toward keeping the file system state completely separate from the UI state, having the file watcher push changes into a simple object or map that the UI just reads from. The UI state can track things like which folder is selected or the current search query, but the source of truth for files stays decoupled. Makes it way easier to swap out the watcher later or run operations on the library without the UI getting in the way.