State Management

An action is a plain object with a string type that describes something that happened, usually with its data in payload; an action creator is a function that builds that object, so every dispatch site produces the same, correctly shaped action.

The core dispatch accepts only plain objects and reducers must stay synchronous and pure, so async work needs middleware; redux-thunk lets you dispatch a function that receives dispatch and getState and dispatches plain actions as the request progresses.

Provider makes the Redux store available to every component beneath it. useSelector reads a value from the store and re-renders the component when that value changes. useDispatch returns the store's dispatch function so components can send actions.

A Redux selector is a function of the root state, plus optional arguments, returning part of it or a value derived from it. Using selectors keeps knowledge of the state shape in one place, so reshaping state changes selectors, not components.

The click handler dispatches an action; the store runs the root reducer with the current state and that action, saves the result, then calls every subscriber, and the subscribed UI rereads state and re-renders what changed.

RTK Query's React createApi generates useGetPostsQuery and useLazyGetPostsQuery for the query and useUpdatePostMutation for the mutation. isLoading is true only while the hook has no data yet; isFetching is true whenever a request is in flight, including refetches.

In RTK Query, queries declare providesTags and mutations declare invalidatesTags; after a mutation, subscribed queries with a matching tag refetch. Tag each post { type: 'Post', id } and the list also with id 'LIST', so edits and additions refetch only what they affect.

RTK Query reuses a cached result while any subscriber holds it and does not refetch on mount by default. keepUnusedDataFor (60 seconds) removes it after the last subscriber leaves; refetchOnMountOrArgChange forces or age-limits refetching on subscribe.

An RTK Query api slice needs its reducer mounted at api.reducerPath and api.middleware appended to the store. Without the middleware, cache lifetimes, invalidation and polling do not run; without setupListeners, refetchOnFocus and refetchOnReconnect never fire.

In RTK Query, give the mutation an onQueryStarted callback that dispatches api.util.updateQueryData to patch the cached post, keeps the returned patchResult, awaits queryFulfilled, and calls patchResult.undo() if it rejects. Invalidating tags on failure is the safer rollback when edits overlap.

Zustand's create((set, get) => ({...})) returns a hook bound to a module-level store. Components call that hook with a selector to read a slice, and actions defined inside the store call set to update it, so no Provider is needed.

Wrap the selector in useShallow from zustand/shallow: it returns the previous object or array when the new one is shallow-equal, so the hook sees a stable reference. v5 dropped the hook's equality argument; createWithEqualityFn in zustand/traditional keeps the old style.

set shallow-merges the object into a copy of the current state: omitted top-level keys survive, but nested objects you pass replace the old ones wholesale. Passing true as the second argument replaces the state outright, used for resets or removing keys.

Build the store with a factory around createStore, create one instance per provider mount with useState(() => createCartStore(initial)), pass that instance through React Context, and read it with useStore(store, selector). Each request, test or widget then owns an isolated store.

persist rehydrates with a shallow merge, so the stored shipping object replaces the new default one and method never appears. Bump the persist version and add a migrate function that fills the field, or supply a deep merge.

atom(initial) makes a primitive atom; atom(get => ...) a read-only derived atom; atom(read, write) a writable derived one, with atom(null, write) as a write-only action. useAtom returns [value, set], useAtomValue the value, useSetAtom only the setter.

A Provider gives its subtree its own store, so the same atoms hold separate values there; without one, hooks use the default store from getDefaultStore. createStore makes a store to pass to Provider and to use outside React.

Jotai follows the dependency graph recorded by get: writing one field atom recomputes only the mounted atoms that read it and notifies only atoms whose value changed. A single Zustand store notifies every subscriber, and each selector filters.

An async atom's value is a promise, so useAtomValue suspends the reader until it settles; a Suspense boundary must sit above it and errors reach an error boundary. unwrap gives a non-suspending view, and the read's signal aborts stale fetches.

Jotai identifies atoms by object identity, so an atom created during render is a brand-new key each time: its value starts over and useAtom can loop. Define atoms at module scope, memoise them with useMemo, or use atomFamily from jotai-family in v3.

makeObservable(this, { ... }) annotates only the members you list; makeAutoObservable(this) infers them: fields become observable, getters computed, functions autoAction, generators flow. makeAutoObservable cannot be used on classes that have a superclass or are subclassed.

An action only covers the synchronous part of a function; code after await runs later, outside it. With the default enforceActions: "observed", changing observed state there logs a warning. Wrap the post-await writes in runInAction, or write the method as a flow generator.

MobX tracks only reads made during an observer's own render. Check that the row is an observer, reads todo.title itself rather than receiving a pre-read string, is not rendered through a non-observer child or callback, and that title is observable.

Use computed for any value derived from state and reactions only for side effects such as saving or logging. A computed is lazy and caches its result only while something observes it; read outside a reaction, it recomputes on every access.

An autorun depends on everything it read in its last run, so serialising the whole list makes any field change re-run it. trace() or getDependencyTree shows those dependencies, reaction narrows them, and calling the returned disposer on unmount stops it.

An NgRx reducer must be a pure, synchronous function from state and action to the next state, so it cannot wait for an API. An effect listens to dispatched actions, runs the request and dispatches a success or failure action back.

EntityState splits a collection into ids, which hold the order, and entities, a map keyed by id, so a card is found by key instead of a scan, is stored once, and can change without rebuilding the order.

An NgRx reducer is a pure function whose new object is how the store detects a change: selectors and select() compare by reference. In development the default immutability check freezes state, so a mutation throws instead of failing silently.

Selectors keep knowledge of the state shape in one file, compute derived values such as invoice totals once and cache them, compose into larger reads, and are pure functions that can be tested without a component.

An NgRx SignalStore is an injectable class built by signalStore() from features: withState turns state slices into signals, withComputed and withMethods add derived values and operations, and by default only the store's own methods can change state.

An NGXS state is a class decorated with @State({ name, defaults }) and @Injectable(); its @Action(ActionClass) methods receive a StateContext and the action and write through setState or patchState. provideStore([RoomsState]) registers it.

@Selector marks a static method whose result is cached on its last inputs; createSelector builds the same kind of selector at runtime. Components read them with select(), which returns a signal, or Store.select for an Observable; @Select is deprecated.

setState replaces the whole slice and also accepts a state operator; patchState shallow-merges top-level properties into an object slice. State operators like patch and updateItem express nested immutable updates and keep unchanged references intact.

NGXS runs async action handlers in parallel, so a slow earlier search can finish last and overwrite newer results. @Action(SearchRooms, { cancelUncompleted: true }) cancels the previous run on each new dispatch; ctx.abortSignal lets async/await code stop too.

NGXS trades NgRx's pure reducers and separate effects for state classes whose DI-enabled @Action handlers update state and do async work in one place. That gives less ceremony and awaitable actions, at the cost of a less explicit, less pure design.

of([1, 2, 3]) emits the array as one value; from([1, 2, 3]) emits 1, 2 and 3 separately. from() converts any ObservableInput - arrays, iterables, promises, async iterables, ReadableStreams or Observables - into an Observable.

An RxJS Observable is lazy: its producer runs only when subscribed, once per subscriber, and can deliver zero, one or many values synchronously or asynchronously. A Promise starts eagerly, settles once, and has no cancel; unsubscribe() stops an Observable's work.

distinctUntilChanged() drops a value only when it equals the last value it emitted, using === by default. It remembers one key, so 21, 21, 22, 21 becomes 21, 22, 21; distinct() is the operator that suppresses every earlier repeat.

Search responses can return out of order. mergeMap forwards every response, so a slow reply for an old query can overwrite the newest results. switchMap unsubscribes the previous request when a new query arrives, so only the latest results arrive.

debounceTime emits the latest value once the stream has been silent for the given time, which suits autosave after typing pauses. throttleTime emits a value, then ignores the source for a fixed window, which suits steady scroll updates.

Actions are functions: listed under actions in an option store, where they use this and so cannot be arrows, or returned from a setup store. An async action returns a promise the component awaits; failures reach the caller unless handled.

createPinia() builds the root container, app.use(pinia) installs it so components can find it, and defineStore('cart', …) only returns a useCartStore function; the store is created on its first call and then shared by every component.

Add it under getters, for example subtotal: (state) => …, and read invoice.total as a property. Pinia wraps each getter in one computed per store, so all components share a cached value that recomputes only after state it read changes.

Direct writes suit single fields and v-model. $patch with an object applies several fields at once, merging nested objects but replacing arrays. $patch with a function mutates state in place for array edits or logic; both patch forms notify subscribers once.

Call setActivePinia(createPinia()) in beforeEach, then call useNotificationsStore() directly and exercise real actions and getters. A fresh pinia per test gives a fresh store, because stores are cached per pinia and state would otherwise leak between tests.

VueUse is a collection of ready-made Vue 3 composables for browser APIs, sensors and reactive state. useEventListener and useIntersectionObserver attach their listener or observer, follow reactive targets, and remove it automatically when the component's scope is disposed.

refDebounced returns a read-only ref that copies a source ref once it stops changing; useDebounceFn wraps a function so it runs after calls pause; useThrottleFn runs a function at most once per interval. Debounce the search box; throttle the resize handler.

useStorage uses the stored value whenever the key exists and ignores the default, so a filter object saved before the field existed lacks it. mergeDefaults: true shallow-merges the defaults under the stored object; a merge function handles nested fields.

Both calls receive plain values read once during setup. Pass useFetch a getter URL plus refetch: true, since refetch defaults to false; refDebounced accepts only a Ref, so wrap the prop with toRef(() => props.search).

On the client, the first call runs useWindowSize in a detached scope and later calls reuse its refs, so one set of listeners serves all panels until the last caller is disposed. During SSR every call gets a fresh, unshared instance.