@goldlabelapps/uberedux

Shared Redux store, providers, theme preference store, and custom React hooks used across Gold Label Apps and NX client applications.

Features

• Global Redux Store: Dynamic key-value state slice (redux) with dot-notation object update actions (setUbereduxKey) and state reset (resetUberedux).
• React Server Components (RSC) Compatible: Ready for Next.js App Router and React 18/19 with 'use client' pragmas.
• Theme Preference Store: Persisted theme management store backed by redux-persist supporting 'light', 'dark', and 'system' modes.
• TypeScript Support: Full type safety with exported interfaces for root states, dispatch, and theme preferences.

Installation

npm install @goldlabelapps/uberedux @reduxjs/toolkit react react-redux redux redux-persist
# or
yarn add @goldlabelapps/uberedux @reduxjs/toolkit react react-redux redux redux-persist
# or
pnpm add @goldlabelapps/uberedux @reduxjs/toolkit react react-redux redux redux-persist

Usage

1. Global Redux Store & Provider

Wrap your React app tree with UbereduxProvider:

// app/providers.tsx or index.tsx
import { UbereduxProvider } from '@goldlabelapps/uberedux';

export function Providers({ children }: { children: React.ReactNode }) {
  return <UbereduxProvider>{children}</UbereduxProvider>;
}

2. Reading and Dispatching State

Use useSlice to read state properties and useDispatch with setUbereduxKey or resetUberedux to update state:

import { useDispatch, useSlice, setUbereduxKey, resetUberedux } from '@goldlabelapps/uberedux';

export function UserSettings() {
  const state = useSlice();
  const dispatch = useDispatch();

  const handleToggleTheme = () => {
    // Supports nested key paths via dot notation
    dispatch(setUbereduxKey({ key: 'user.preferences.notifications', value: true }));
  };

  const handleReset = () => {
    dispatch(resetUberedux());
  };

  return (
    <div>
      <p>Notifications: {String(state.user?.preferences?.notifications)}</p>
      <button onClick={handleToggleTheme}>Enable Notifications</button>
      <button onClick={handleReset}>Reset State</button>
    </div>
  );
}

3. Theme Preference Store

A dedicated persisted store for client theme mode (light | dark | system):

import {
  themePreferenceStore,
  setPersistedThemeMode,
  clearPersistedThemeMode,
  selectPersistedThemeMode,
  readPersistedThemeModeFromStorage,
} from '@goldlabelapps/uberedux';

// Set mode
themePreferenceStore.dispatch(setPersistedThemeMode('dark'));

// Select current mode
const currentMode = selectPersistedThemeMode(themePreferenceStore.getState());

// Read directly from storage (useful for SSR initial theme hydration script)
const storedMode = readPersistedThemeModeFromStorage();

// Clear theme preference
themePreferenceStore.dispatch(clearPersistedThemeMode());

Subpath Exports

The package supports clean modular imports via entrypoints:

| Export Path | Description | | :--- | :--- | | @goldlabelapps/uberedux | Main index entrypoint exporting all utilities and types | | @goldlabelapps/uberedux/store | Redux store instance (store), actions (setUbereduxKey, resetUberedux), initialState | | @goldlabelapps/uberedux/UbereduxProvider | React Redux Provider component | | @goldlabelapps/uberedux/hooks/useDispatch | Typed useDispatch hook | | @goldlabelapps/uberedux/hooks/useSlice | Typed useSlice hook | | @goldlabelapps/uberedux/themePreferenceStore | Persisted theme preference store, persistor, actions, and storage helper |

License

MIT