ABC Redux Package

A comprehensive Redux state management package for the ABC system, providing utilities for state management, store configuration, and state clearing functionality.

📦 Installation

pnpm add abc-redux

🚀 Key Features

1. State Management

• Redux Toolkit integration with modern Redux patterns
• Type-safe state management with TypeScript
• Optimized selectors with Reselect
• React-Redux hooks for component integration

2. State Clearing Utilities

• Global state clearing functionality
• Application-specific state reset
• Callback support for post-clear actions
• Hook-based and action-based clearing methods

3. Store Configuration

• Pre-configured store setup
• Middleware integration
• DevTools support
• Type-safe store typing

📚 API Reference

Hooks

useClearAllState

React hook for clearing all application state.

import { useClearAllState } from "abc-redux";

const MyComponent = () => {
  const clearAllState = useClearAllState();

  const handleLogout = () => {
    clearAllState();
    // Perform other actions after clearing state
  };

  return <button onClick={handleLogout}>Logout</button>;
};

useAppDispatch

Typed dispatch hook for Redux actions.

import { useAppDispatch, clearAllState } from "abc-redux";

const MyComponent = () => {
  const dispatch = useAppDispatch();

  const handleClearState = () => {
    dispatch(clearAllState());
  };

  return <button onClick={handleClearState}>Clear State</button>;
};

Actions

clearAllState

Action creator for clearing all application state.

import { clearAllState } from "abc-redux";

// Dispatch the action
dispatch(clearAllState());

Utilities

clearStateWithCallback

Utility function for clearing state with a callback function.

import { clearStateWithCallback } from "abc-redux";

const MyComponent = () => {
  const dispatch = useAppDispatch();

  const handleClearAndRedirect = clearStateWithCallback(dispatch, () => {
    // Callback executed after state is cleared
    window.location.href = "/login";
  });

  return (
    <button onClick={handleClearAndRedirect}>Clear State & Redirect</button>
  );
};

🎨 Usage Examples

Basic State Clearing

import { useClearAllState } from "abc-redux";

const LogoutButton = () => {
  const clearAllState = useClearAllState();

  const handleLogout = () => {
    clearAllState();
    // Redirect to login page
    window.location.href = "/login";
  };

  return <button onClick={handleLogout}>Logout</button>;
};

Advanced State Management

import { useAppDispatch, useAppSelector } from "abc-redux";
import { clearAllState } from "abc-redux";

const UserProfile = () => {
  const dispatch = useAppDispatch();
  const user = useAppSelector((state) => state.user);

  const handleResetProfile = () => {
    dispatch(clearAllState());
    // Additional cleanup logic
    localStorage.clear();
  };

  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <button onClick={handleResetProfile}>Reset Profile</button>
    </div>
  );
};

Custom State Clearing with Callback

import { useAppDispatch, clearStateWithCallback } from "abc-redux";

const SettingsPage = () => {
  const dispatch = useAppDispatch();

  const handleResetSettings = clearStateWithCallback(dispatch, () => {
    // Show success message
    alert("Settings have been reset!");
    // Navigate to home page
    window.location.href = "/";
  });

  return (
    <div>
      <h1>Settings</h1>
      <button onClick={handleResetSettings}>Reset All Settings</button>
    </div>
  );
};

🧪 Testing

# Run tests
pnpm test

# Run tests with coverage
pnpm test:coverage

# Run tests once
pnpm test:run

🔧 Development

# Build package
pnpm build

# Development mode with watch
pnpm dev

# Clean dist
pnpm clean

# Lint code
pnpm lint

# Type check
pnpm check-types

📦 Dependencies

Production Dependencies

• @reduxjs/toolkit - Modern Redux toolkit with utilities
• react-redux - React bindings for Redux
• reselect - Memoized selector library for Redux

Development Dependencies

• @types/node - Node.js type definitions
• eslint - Code linting
• tsup - TypeScript bundler
• typescript - TypeScript compiler

🎯 Use Cases

Application State Management

• User State - User authentication and profile data
• App Configuration - Application settings and preferences
• Study State - Learning progress and study sessions
• Test State - Test progress and results
• Payment State - Payment information and transactions

State Clearing Scenarios

• User Logout - Clear all user-related state
• App Reset - Reset application to initial state
• Session Expiry - Clear state when session expires
• Error Recovery - Reset state after critical errors

🔗 Integration

With React Components

import { Provider } from "react-redux";
import { store } from "abc-redux";

export default function App() {
  return (
    <Provider store={store}>
      <YourApp />
    </Provider>
  );
}

With Next.js

// pages/_app.tsx
import { Provider } from "react-redux";
import { store } from "abc-redux";

export default function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

📱 State Structure

Available State Slices

• appInfo - Application information and metadata
• appConfig - Application configuration settings
• study - Learning and study session state
• game - Game and test state
• test - Test progress and results
• user - User authentication and profile data
• payment - Payment and subscription information
• state - General application state

📄 License

MIT