Skip to content

MIT LicenseTypeScriptnpm

State management and reactive patterns for the ziegel framework. Provides Redux-style stores, observables, subjects, and action/reducer patterns for predictable state management.

State Management: Redux-inspired state management with reactive programming patterns and type-safe actions and stores.

🚀 Overview

@breadstone/ziegel-redux provides:

  • Redux Store: Type-safe Redux store implementation with actions and reducers
  • Reactive Patterns: Observables, subjects, and subscription management
  • Action System: Structured action interfaces and dispatching
  • Middleware Support: Extensible middleware pipeline for actions
  • State Management: Predictable state updates with action/reducer patterns
  • Type Safety: Full TypeScript support for stores, actions, and state

📦 Installation

bash
npm install @breadstone/ziegel-redux
# or
yarn add @breadstone/ziegel-redux

🧩 Features & Usage Examples

Redux Store

typescript
import { Store, IStore, IAction } from '@breadstone/ziegel-redux';

interface AppState {
  count: number;
  user: User | null;
}

interface IncrementAction extends IAction {
  type: 'INCREMENT';
  payload?: number;
}

const store = new Store<AppState>({
  count: 0,
  user: null,
});

// Dispatch actions
store.dispatch({ type: 'INCREMENT', payload: 1 });

Observable and Subject

typescript
import { Observable, Subject, IObservable, IObserver } from '@breadstone/ziegel-redux';

// Create a subject for data streaming
const dataSubject = new Subject<string>();

// Subscribe to changes
dataSubject.subscribe((value) => {
  console.log('Received:', value);
});

// Emit values
dataSubject.next('Hello');
dataSubject.next('World');

// Create custom observables
const customObservable = new Observable<number>((observer) => {
  let count = 0;
  const interval = setInterval(() => {
    observer.next(count++);
  }, 1000);

  return () => clearInterval(interval);
});

Action System

typescript
import { IAction, IDispatcher, IReducer } from '@breadstone/ziegel-redux';

// Define typed actions
interface SetUserAction extends IAction {
  type: 'SET_USER';
  payload: User;
}

interface ClearUserAction extends IAction {
  type: 'CLEAR_USER';
}

type UserActions = SetUserAction | ClearUserAction;

// Implement reducer
const userReducer: IReducer<User | null, UserActions> = (state = null, action) => {
  switch (action.type) {
    case 'SET_USER':
      return action.payload;
    case 'CLEAR_USER':
      return null;
    default:
      return state;
  }
};

Middleware

typescript
import { IMiddleware, IAction, IStore } from '@breadstone/ziegel-redux';

// Create logging middleware
const loggingMiddleware: IMiddleware = (store, next) => (action) => {
  console.log('Dispatching action:', action);
  const result = next(action);
  console.log('New state:', store.getState());
  return result;
};

// Apply middleware to store
store.use(loggingMiddleware);

Reactive Subscriptions

typescript
import { ISubscription, ISubscribable } from '@breadstone/ziegel-redux';

// Subscribe to store changes
const subscription: ISubscription = store.subscribe((state) => {
  console.log('State changed:', state);
});

// Unsubscribe when done
subscription.unsubscribe();

// Work with subscribable patterns
function processSubscribable<T>(subscribable: ISubscribable<T>) {
  return subscribable.subscribe((value) => {
    // Process the value
    console.log('Processing:', value);
  });
}

📚 Package import points

typescript
import {
  // Reactive Interfaces
  IObservable,
  IObserver,
  ISubscribable,
  ISubscriber,
  ISubscription,

  // Reactive Implementations
  Observable,
  Subject,

  // Redux Interfaces
  IAction,
  IDispatcher,
  IMiddleware,
  IReducer,

  // Store
  IStore,
  Store,
} from '@breadstone/ziegel-redux';
// Redux utilities (to be implemented)
// This package is planned for Redux state management patterns
// Implementation will follow Redux/Redux Toolkit patterns

} from '@breadstone/ziegel-redux';


## 📚 API Documentation


## Related Packages

- **@breadstone/ziegel-core**: Foundation utilities and type definitions
- **redux**: Core Redux library
- **reselect**: Selector library for Redux

## License

MIT

## Issues

Please report bugs and feature requests in the [Issue Tracker](https://github.com/RueDeRennes/ziegel/issues)

---

*Part of the [ziegel Enterprise TypeScript Framework](/)*

Released under the MIT License.