Hein
f737b1d11d
- refactor state structure to include app, layout, navigation, owner, program, session, and user - add slices for managing program, session, owner, user, layout, navigation, and app states - create context provider for global state with automatic fetching and throttling - implement persistence using IndexedDB with localStorage fallback - add comprehensive README documentation for usage and API
106 lines
3.0 KiB
Markdown
106 lines
3.0 KiB
Markdown
# GlobalStateStore
|
|
|
|
Zustand-based global state management with automatic persistence.
|
|
|
|
## Quick Start
|
|
|
|
```tsx
|
|
import {
|
|
GlobalStateStoreProvider,
|
|
useGlobalStateStore,
|
|
useGlobalStateStoreContext
|
|
} from './GlobalStateStore';
|
|
|
|
// Wrap app with provider
|
|
function App() {
|
|
return (
|
|
<GlobalStateStoreProvider
|
|
apiURL="https://api.example.com"
|
|
fetchOnMount={true}
|
|
throttleMs={5000}
|
|
>
|
|
<MyComponent />
|
|
</GlobalStateStoreProvider>
|
|
);
|
|
}
|
|
|
|
// Use in components
|
|
function MyComponent() {
|
|
const { program, session, user } = useGlobalStateStore();
|
|
const { refetch } = useGlobalStateStoreContext();
|
|
|
|
return (
|
|
<div>
|
|
{program.name}
|
|
<button onClick={refetch}>Refresh</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Outside React
|
|
const apiURL = GlobalStateStore.getState().session.apiURL;
|
|
GlobalStateStore.getState().setAuthToken('token');
|
|
```
|
|
|
|
## Provider Props
|
|
|
|
- **apiURL** - Initial API URL (optional)
|
|
- **autoFetch** - Enable automatic fetching (default: `true`)
|
|
- **fetchOnMount** - Fetch data when provider mounts (default: `true`)
|
|
- **throttleMs** - Minimum time between fetch calls in milliseconds (default: `0`)
|
|
|
|
## Context Hook
|
|
|
|
`useGlobalStateStoreContext()` returns:
|
|
- **fetchData(url?)** - Throttled fetch function
|
|
- **refetch()** - Refetch with current URL
|
|
|
|
## State Slices
|
|
|
|
- **program** - name, logo, description, tags, version
|
|
- **session** - apiURL, authToken, connected, loading, error, parameters, meta
|
|
- **owner** - id, name, logo, settings, theme (darkMode, name)
|
|
- **user** - username, email, fullNames, isAdmin, avatarUrl, parameters, theme (darkMode, name)
|
|
- **layout** - leftBar, rightBar, topBar, bottomBar (each: open, collapsed, pinned, size, menuItems)
|
|
- **navigation** - menu, currentPage
|
|
- **app** - environment, updatedAt, controls, globals
|
|
|
|
## Actions
|
|
|
|
**Program:** `setProgram(updates)`
|
|
**Session:** `setSession(updates)`, `setAuthToken(token)`, `setApiURL(url)`
|
|
**Owner:** `setOwner(updates)`
|
|
**User:** `setUser(updates)`
|
|
**Layout:** `setLayout(updates)`, `setLeftBar(updates)`, `setRightBar(updates)`, `setTopBar(updates)`, `setBottomBar(updates)`
|
|
**Navigation:** `setNavigation(updates)`, `setMenu(items)`, `setCurrentPage(page)`
|
|
**App:** `setApp(updates)`
|
|
**Complex:** `fetchData(url?)`, `login(token?)`, `logout()`
|
|
|
|
## Custom Fetch
|
|
|
|
```ts
|
|
GlobalStateStore.getState().onFetchSession = async (state) => {
|
|
const response = await fetch(`${state.session.apiURL}/session`, {
|
|
headers: { Authorization: `Bearer ${state.session.authToken}` }
|
|
});
|
|
const data = await response.json();
|
|
|
|
return {
|
|
program: { name: data.appName, ... },
|
|
user: { id: data.userId, name: data.userName, ... },
|
|
navigation: { menu: data.menu },
|
|
};
|
|
};
|
|
```
|
|
|
|
## Persistence
|
|
|
|
Auto-saves to IndexedDB (localStorage fallback).
|
|
Auto-loads on initialization.
|
|
Skips transient data: loading states, errors, controls.
|
|
|
|
## TypeScript
|
|
|
|
Fully typed with exported types:
|
|
`GlobalState`, `ProgramState`, `SessionState`, `OwnerState`, `UserState`, `ThemeSettings`, `LayoutState`, `BarState`, `NavigationState`, `AppState`
|