Skip to content

State Management#

The app makes heavy use of Redux Toolkit, its Query library, and nanostores.

Redux#

We use RTK extensively - slices, entity adapters, queries, reselect, the whole 9 yards. Their docs are excellent.

nanostores#

nanostores is a tiny state management library. It provides both imperative and declarative APIs.

Example#

export const $myStringOption = atom<string | null>(null);

// Outside a component, or within a callback for performance-critical logic
$myStringOption.get();
$myStringOption.set('new value');

// Inside a component
const myStringOption = useStore($myStringOption);

Where to put nanostores#

  • For global application state, export your stores from invokeai/frontend/web/src/app/store/nanostores/.
  • For feature state, create a file for the stores next to the redux slice definition (e.g. invokeai/frontend/web/src/features/myFeature/myFeatureNanostores.ts).
  • For hooks with global state, export the store from the same file the hook is in, or put it next to the hook.

When to use nanostores#

  • For non-serializable data that needs to be available throughout the app, use nanostores instead of a global.
  • For ephemeral global state (i.e. state that does not need to be persisted), use nanostores instead of redux.
  • For performance-critical code and in callbacks, redux selectors can be problematic due to the declarative reactivity system. Consider refactoring to use nanostores if there's a measurable performance issue.