Implementing Flux Architecture in React with TypeScript

This challenge focuses on building a foundational understanding of the Flux architecture pattern within a React application using TypeScript. You will implement a simplified Flux-like pattern to manage application state and demonstrate how different components interact with this state management system. This is a core concept for building scalable and maintainable React applications.

Problem Description

Your task is to create a simple counter application that adheres to the principles of Flux architecture. This application will have a display showing the current count and buttons to increment and decrement it. You will need to implement the core components of Flux: Actions, Dispatcher, Stores, and Views (React components).

Key Requirements:

• Actions: Define functions that represent user interactions (e.g., incrementCount, decrementCount). These actions will carry payloads (if any) describing the change.
• Dispatcher: A central hub that receives all actions and broadcasts them to registered stores.
• Stores: Objects that hold application state and logic. Stores register themselves with the dispatcher and update their state when they receive relevant actions. They should also emit change events.
• Views (React Components): Components that display the state from the stores and dispatch actions in response to user interactions. They should subscribe to store changes and re-render accordingly.

Expected Behavior:

1. The application should display a number, initially 0.
2. Clicking an "Increment" button should increase the displayed number by 1.
3. Clicking a "Decrement" button should decrease the displayed number by 1.
4. All state changes must flow through the defined Flux pattern (Action -> Dispatcher -> Store -> View).

Edge Cases:

• Consider how to handle multiple stores if you were to extend this. For this specific challenge, one store is sufficient.

Examples

Example 1: Initial State

Input: (No direct input, application starts)
Output:
  Count: 0
  [Increment Button] [Decrement Button]
Explanation: The application initializes with the counter set to 0.

Example 2: Incrementing the Counter

Input: User clicks the "Increment Button".
Output:
  Count: 1
  [Increment Button] [Decrement Button]
Explanation: An "increment" action is dispatched. The CounterStore receives this action, updates its state to 1, and emits a change event. The CounterView subscribes to this event and re-renders to show the new count.

Example 3: Decrementing the Counter

Input: User clicks the "Decrement Button".
Output:
  Count: 0
  [Increment Button] [Decrement Button]
Explanation: A "decrement" action is dispatched. The CounterStore receives this action, updates its state to 0, and emits a change event. The CounterView re-renders.

Constraints

• The solution must be written entirely in TypeScript.
• You should use React functional components and hooks where appropriate.
• Avoid using external state management libraries like Redux or Zustand. The goal is to implement the core Flux pattern yourself.
• The dispatcher should be a singleton.
• Stores should emit events (you can simulate this with a simple observer pattern or event emitter).

Notes

• Think about how you will structure your ActionCreator, Dispatcher, and Store.
• The Dispatcher is responsible for the single, synchronous flow of data.
• Stores should not be directly manipulated by components. All changes must go through actions.
• For event emission from stores, consider a simple callback mechanism.
• This exercise is about understanding the pattern, so keep the UI relatively simple. Focus on the state management flow.