UI Store

Redux-based state management framework for microkernel applications with extensible middleware and dynamic reducer registration.

Package Structure

This is a monorepo package containing four sub-packages following the API-SPI-IMPL pattern:

• @hamak/ui-store-api - Type definitions, interfaces, and service tokens
• @hamak/ui-store-spi - Service Provider Interfaces for extensibility
• @hamak/ui-store-impl - Concrete implementations with Redux integration
• @hamak/ui-store-templates - React hooks and components

Features

Extensible Middleware System

• Plugin contributions - Any plugin can register middleware
• Priority-based ordering - Control middleware execution order
• Type-safe - Full TypeScript support
• Built-in middleware - Logger, thunk, event bridge, crash reporter

Dynamic Reducer Registry

• Hot replacement - Add/remove reducers at runtime
• Plugin isolation - Each plugin manages its own slice
• Type-safe - Strongly typed state access

Microkernel Integration

• Event bridge - Bidirectional Redux ↔ Microkernel events
• DI integration - Services via dependency injection
• Plugin lifecycle - Initialize during plugin setup

React Integration

• Standard Redux hooks - useSelector, useDispatch, useStore
• Framework hooks - Access store manager, registries, events
• DevTools support - Redux DevTools integration

Installation

bun add @hamak/ui-store-api @hamak/ui-store-impl @hamak/ui-store-templates

Quick Start

import { Host } from '@hamak/microkernel-impl';
import { createStorePlugin } from '@hamak/ui-store-impl';
import { thunk } from 'redux-thunk';

const host = new Host();

// Register store plugin
host.registerPlugin(
  'ui-store',
  { name: 'ui-store', version: '1.0.0', entry: '' },
  createStorePlugin({
    devTools: true,
    middleware: [
      { id: 'redux-thunk', middleware: thunk, priority: 500 }
    ]
  })
);

await host.bootstrapAllAtRoot();

Usage

Plugin Contributing Middleware

import { MIDDLEWARE_REGISTRY_TOKEN } from '@hamak/ui-store-api';

export const myPlugin: PluginModule = {
  async initialize(ctx) {
    const registry = ctx.resolve(MIDDLEWARE_REGISTRY_TOKEN);

    registry.register({
      id: 'my-middleware',
      middleware: (store) => (next) => (action) => {
        console.log('Action:', action.type);
        return next(action);
      },
      priority: 100,
      plugin: 'my-plugin'
    });
  }
};

Plugin Contributing Reducer

import { REDUCER_REGISTRY_TOKEN } from '@hamak/ui-store-api';

export const myPlugin: PluginModule = {
  async initialize(ctx) {
    const registry = ctx.resolve(REDUCER_REGISTRY_TOKEN);

    registry.register('mySlice', (state = {}, action) => {
      switch (action.type) {
        case 'MY_ACTION':
          return { ...state, ...action.payload };
        default:
          return state;
      }
    });
  }
};

React Components

import { useSelector, useDispatch } from '@hamak/ui-store-templates';

function MyComponent() {
  const data = useSelector(state => state.mySlice.data);
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch({ type: 'MY_ACTION', payload: {} })}>
      Click Me
    </button>
  );
}

Architecture

Plugins → DI Container → Store Manager
  ↓          ↓              ↓
Middleware Registry    Reducer Registry
  ↓          ↓              ↓
Redux Store ↔ Event Bridge ↔ Microkernel
  ↓
React (useSelector, useDispatch)

License

MIT