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.