Skip to the content

/

Nano Stores

Nano Stores 1

Nano Stores: 0% done

Module 1 · State, and why parts of a page share it

State is what a page remembers right now

Loading the slide…

A line of words about as long as a slide’s first line, and its second.

Another line, shorter.

1 / 155 · State, and why parts of a page share it

Course progress

0%

State is what a page remembers right now
, 1 to practiseWhen state changes, the screen must follow
Several separate widgets often need the same state
Passing a value from widget to widget gets tangled
, 1 to practiseA global variable is shared, but nobody hears it change
The fix: let widgets subscribe to changes
, 1 to practiseCheck: how a shared store flows
Nano Stores is a tiny library of such stores
, 1 to practiseNot all state belongs in a shared store
Recap: state and sharing

Twenty lines of code, and you’ll understand the library
A function is a value you can pass around
, 1 to practiseAn object groups values and functions under names
A store is a value plus a list of listeners
, 1 to practiseUsing it: the badge finally follows the cart
, 1 to practiseSubscribing should hand back a way to stop
, 1 to practiseSetting the same value again shouldn’t notify
, 1 to practiseTry it: build the store yourself
What the real library adds
Recap: a store by hand

The tools: a terminal, Node.js and npm
npm install adds Nano Stores to a project
, 1 to practiseA module is a file that shares what it exports
Your first store: an atom
, 1 to practiseStore names start with $
TypeScript says what a store may hold
, 1 to practiseReading a type error
Try it on your computer
Recap: first store

The cart as an atom
, 1 to practiseset() notifies only when the value really changed
, 1 to practisesubscribe() calls you now; listen() waits for a change
, 1 to practiseBoth return a function that stops listening
Replace values; never change them in place
, 1 to practiseFind the change in place
, 1 to practiseTry it: add and remove without changing in place
, 1 to practiseStore types: writable, readable, and the value inside
Recap: atoms

Some state is a group of named fields
map() holds an object; setKey() changes one key
, 1 to practiseEqual values don’t notify; undefined removes a key
, 1 to practiseA cart keyed by product id
, 1 to practiseTry it: a cart keyed by id
, 1 to practiseListen only to the keys you care about
, 1 to practiseOne map, or several atoms?
deepMap for nested objects, when you must
Recap: maps

Some state is worked out, not stored
computed() makes a store from other stores
, 1 to practiseDerive from several stores at once
, 1 to practiseTry it: a total with a discount
, 1 to practiseA computed store only works while someone watches
, 1 to practiseAn unchanged result notifies nobody
, 1 to practiseThe function must be pure
, 1 to practiseDerive, don’t duplicate
Recap: computed stores

An action is a function that changes a store
, 1 to practiseWhy one place for the rules pays off
, 1 to practiseActions read the current value with get()
, 1 to practiseTry it: a to-do list with rules
Many small stores, one file per topic
, 1 to practiseExport a read-only store, so only actions write
, 1 to practiseName actions for what happens, not how
Recap: actions

React in one slide
useStore connects a store to a component
, 1 to practiseEvents call actions
, 1 to practiseA component can read several stores
, 1 to practiseRe-render only for the keys you read
Work out values in stores, not in components
, 1 to practiseNano Store, React state, or React context?
Recap: React

An island is an interactive widget in a static page
, 1 to practiseIslands have no common parent, but they share modules
An Astro page with three islands
, 1 to practisePlain scripts can use stores too
Vue, Svelte, Preact, Solid: same store, small bindings
Svelte reads stores directly
Islands are drawn on the server first
, 1 to practiseHydrate with the starting value, then catch up
One page, one copy of each store module
Recap: islands

A store with no listeners is asleep
onMount starts the work and returns the cleanup
, 1 to practiseTry it: open a feed only while someone listens
, 1 to practiseCleanup waits one second
, 1 to practiseget() on a sleeping store wakes it, briefly
, 1 to practiseUndo everything onMount starts
, 1 to practiseonSet can check or refuse a change
, 1 to practiseeffect() runs code now and whenever stores change
Recap: lifecycle

localStorage keeps text in the browser
persistentAtom is an atom saved to localStorage
, 1 to practiseAnything but text needs encoding
, 1 to practiseA cart that survives a reload
, 1 to practisepersistentMap saves one key per field
, 1 to practiseTabs stay in sync, while the store is mounted
, 1 to practiseSaved values are user input: check them
, 1 to practiseSaved values and server-drawn HTML
Recap: persistence

Some work finishes later: promises and await
, 1 to practiseModel loading, ready and failed explicitly
Load on first use, with onMount
, 1 to practiseAn old answer can arrive after a new one
, 1 to practiseCancel what nobody wants any more
Async actions: busy, done, or failed
, 1 to practiseTry it: load a list, or say why not
, 1 to practisetask() lets others wait for a store’s work
For serious fetching, use a store made for it
Recap: async data

A test is code that checks your code
Test an action by calling it and reading the store
, 1 to practiseStores outlive each test: reset them
, 1 to practiseTry it: reset before each test
, 1 to practisecleanStores removes listeners and runs cleanups
, 1 to practiseTest cleanup under fake timers
, 1 to practiseWait for async store work with allTasks()
, 1 to practisePersistent stores need a test storage engine
Test a widget when the wiring is what matters
Recap: testing

A change costs its listeners’ work
, 1 to practisebatch() delivers several writes as one change
, 1 to practiseTry it: apply a coupon in one change
, 1 to practisebatch() is synchronous
batched() waits a moment before telling listeners
, 1 to practiseComputed stores that return new objects always notify
, 1 to practiseListeners run in a queue, in order
Big collections: key by id, change one entry
, 1 to practiseMemory leaks: listeners that outlive their widget
Recap: performance

In the browser one visitor; on a server, everyone
, 1 to practiseNever put one visitor’s data in a module-level store on the server
, 1 to practiseHand per-request data to islands as props
, 1 to practiseStore side effects can run during server rendering
Top-level code in store modules runs on the server too
, 1 to practiseSeeding a store from server data, in the browser
Recap: the server

A store module is an API: stores to read, actions to call
, 1 to practiseKeep the writable store and helpers private
Stores you need one of per id
, 1 to practiseTry it: one store per product, shared
, 1 to practisemapCreator does this for maps
, 1 to practiseLayer modules so dependencies point one way
Report outcomes through state, not callbacks
, 1 to practiseReviewing a store design
Recap: store design

, 1 to practisePredict the notifications: maps and computed
, 2 to practisePredict the notifications: batch and old values
, 1 to practiseDebug: a row that doesn’t update
, 1 to practiseDebug: a flash and a hydration error
, 1 to practiseDesign: a remembered, validated setting
, 2 to practiseTrace a lazy store’s life on a page
, 1 to practiseReview a teammate’s store module
Capstone: shared state for a small shop
Recap: the whole course