ts-09-typed-store

# Typed redux-style store

Implement **`solution.ts`** exporting a generic store factory (a tiny redux).

Export exactly one function. It is generic over the state type `S` and the action type
`A`, and returns a store object:

```ts
export function createStore<S, A>(
  reducer: (state: S, action: A) => S,
  initial: S,
): {
  getState(): S;
  dispatch(action: A): void;
  subscribe(fn: () => void): () => void;
};
```

Behavior:

- `getState()` returns the **current** state (starts as `initial`).
- `dispatch(action)` computes the next state as `reducer(currentState, action)`,
  replaces the current state with it, then notifies **all** current subscribers (calls
  each subscriber function once, with no arguments).
- `subscribe(fn)` registers `fn` and returns an **unsubscribe** function. Calling the
  returned function removes `fn` so it is no longer notified on future dispatches.
  Unsubscribing the same listener twice is harmless.

The store must be fully generic: `S` and `A` are inferred from the `reducer` and
`initial` arguments, and `dispatch` must only accept values of the action type `A`
(typically a discriminated union).

Example:
```ts
type Action = { type: "inc" } | { type: "add"; by: number };

const store = createStore<number, Action>((state, action) => {
  switch (action.type) {
    case "inc": return state + 1;
    case "add": return state + action.by;
  }
}, 0);

store.getState();            // 0
const off = store.subscribe(() => { /* ... */ });
store.dispatch({ type: "inc" });        // state -> 1, subscriber fired
store.dispatch({ type: "add", by: 5 }); // state -> 6
off();                                    // unsubscribe
```

Keep it fully typed (must pass `tsc --noEmit` in strict mode). Do not use `any` in the
public API.

import { test } from "node:test";
import { strict as assert } from "node:assert";
import { createStore } from "./solution.ts";

type Action = { type: "inc" } | { type: "add"; by: number } | { type: "reset" };

function counterReducer(state: number, action: Action): number {
  switch (action.type) {
    case "inc":
      return state + 1;
    case "add":
      return state + action.by;
    case "reset":
      return 0;
  }
}

function makeCounter(initial = 0) {
  return createStore<number, Action>(counterReducer, initial);
}

test("starts at the initial state", () => {
  assert.equal(makeCounter(5).getState(), 5);
});

test("dispatch updates state via the reducer", () => {
  const s = makeCounter();
  s.dispatch({ type: "inc" });
  assert.equal(s.getState(), 1);
  s.dispatch({ type: "add", by: 5 });
  assert.equal(s.getState(), 6);
  s.dispatch({ type: "reset" });
  assert.equal(s.getState(), 0);
});

test("subscribers fire on every dispatch", () => {
  const s = makeCounter();
  let calls = 0;
  s.subscribe(() => {
    calls += 1;
  });
  s.dispatch({ type: "inc" });
  s.dispatch({ type: "inc" });
  assert.equal(calls, 2);
});

test("multiple subscribers all fire", () => {
  const s = makeCounter();
  let a = 0;
  let b = 0;
  s.subscribe(() => {
    a += 1;
  });
  s.subscribe(() => {
    b += 1;
  });
  s.dispatch({ type: "inc" });
  assert.equal(a, 1);
  assert.equal(b, 1);
});

test("unsubscribe stops notifications", () => {
  const s = makeCounter();
  let calls = 0;
  const off = s.subscribe(() => {
    calls += 1;
  });
  s.dispatch({ type: "inc" });
  off();
  s.dispatch({ type: "inc" });
  assert.equal(calls, 1);
  assert.equal(s.getState(), 2);
});

test("unsubscribing twice is harmless", () => {
  const s = makeCounter();
  const off = s.subscribe(() => {});
  off();
  assert.doesNotThrow(() => off());
});

test("subscriber sees the updated state when notified", () => {
  const s = makeCounter();
  const seen: number[] = [];
  s.subscribe(() => {
    seen.push(s.getState());
  });
  s.dispatch({ type: "inc" });
  s.dispatch({ type: "add", by: 10 });
  assert.deepEqual(seen, [1, 11]);
});

test("works with an object state shape", () => {
  type S = { count: number; label: string };
  type A = { type: "bump" } | { type: "label"; text: string };
  const s = createStore<S, A>((state, action) => {
    switch (action.type) {
      case "bump":
        return { ...state, count: state.count + 1 };
      case "label":
        return { ...state, label: action.text };
    }
  }, { count: 0, label: "" });
  s.dispatch({ type: "bump" });
  s.dispatch({ type: "label", text: "hi" });
  assert.deepEqual(s.getState(), { count: 1, label: "hi" });
});

You are an expert programmer. Solve the task exactly as specified. Output your solution as fenced code blocks using the required file name(s) and the exact function/type signatures requested. Prefer correctness; do not include prose outside code unless asked.

To solve this problem, we need to implement a generic Redux-style store in TypeScript. The store should manage state updates and notify subscribers when the state changes. The solution must be fully typed and adhere to the specified behavior.

### Approach
1. **Store Structure**: The store will maintain the current state and a list of subscriber functions.
2. **State Management**: The state is updated using a reducer function, which takes the current state and an action to compute the next state.
3. **Subscribers**: Subscribers are functions that get notified when the state changes. Each subscription returns an unsubscribe function to remove the subscriber from the list.
4. **Dispatch**: When an action is dispatched, the state is updated, and all current subscribers are notified.

### Solution Code
```typescript
export function createStore<S, A>(
  reducer: (state: S, action: A) => S,
  initial: S,
): {
  getState(): S;
  dispatch(action: A): void;
  subscribe(fn: () => void): () => void;
} {
  let currentState = initial;
  const subscribers = [] as Array<() => void>;

  return {
    getState: () => currentState,
    dispatch: (action: A) => {
      const newState = reducer(currentState, action);
      currentState = newState;
      subscribers.forEach(fn => fn());
    },
    subscribe: (fn: () => void) => {
      subscribers.push(fn);
      return () => {
        const index = subscribers.indexOf(fn);
        if (index !== -1) {
          subscribers.splice(index, 1);
        }
      };
    },
  };
}
```

### Explanation
- **Store Initialization**: The store is initialized with the initial state and an empty list of subscribers.
- ** getState()**: Returns the current state of the store.
- ** dispatch(action)**: Updates the state using the reducer function and notifies all subscribers.
- ** subscribe(fn)**: Adds a subscriber function to the list and returns an unsubscribe function to remove it. The unsubscribe function ensures that the subscriber is removed from the list when called, even if it was added multiple times.

This implementation ensures that the store is fully generic, correctly typed, and adheres to the specified behavior for state management and subscription handling.

Okay, I need to implement a generic Redux-style store in TypeScript. The function is called createStore and it's generic over state S and action A. It returns an object with getState, dispatch, and subscribe methods.

First, let's think about the structure. The store needs to keep track of the current state, a list of subscribers, and when dispatch is called, it updates the state and notifies all subscribers.

So, the internal state of the store will have:
- currentState: S
- subscribers: an array of functions that are subscribed.

When someone calls subscribe, they add a function to the subscribers array and return an unsubscribe function which removes it.

For the types, everything needs to be correctly typed. The reducer is a function that takes state and action and returns the next state. The initial state is provided.

Let me outline the steps:

1. The createStore function will create an object with the three methods.
2. getState is straightforward—it just returns the current state.
3. dispatch takes an action of type A, applies the reducer to get the new state, updates currentState, then calls each subscriber function.
4. subscribe adds the function to the subscribers array and returns a function that removes it.

Wait, but how to manage the subscribers. I think I'll have an array that holds all the subscriber functions. Each time subscribe is called, push the function into the array and return a function that removes it by finding the index.

But wait, what if the same function is subscribed multiple times? Like, if someone calls subscribe(fn) twice. Then, when unsubscribing, we need to remove all instances of fn. Or maybe just once. Hmm, the problem statement says that unsubscribing the same listener twice is harmless. So perhaps when we return the unsubscribe function, it removes the function from the subscribers array, but if it's added multiple times, each unsubscribe call will remove one occurrence.

Wait, no. The problem says that the same listener can be unsubscribed twice without harm. So perhaps the way to handle it is that when you subscribe, you add the function to the array, and when you unsubscribe, you filter it out regardless of how many times it was added.

Alternatively, perhaps each subscribe adds the function, and each unsubscribe removes it once. So if it was added twice, you need to unsubscribe twice to fully remove it. But that's probably not the intended behavior. Maybe the correct approach is that each subscribe adds the function, and each unsubscribe removes it once, but if it's not present, it does nothing.

But for the problem statement, it's specified that the same listener can be unsubscribed twice without harm. So perhaps the unsubscribe function just removes the listener once, but if it's not present, it's a no-op.

So, in the code, when a new subscription is made, we push the function into the subscribers array. The unsubscribe function will filter it out.

Wait, but if the same function is added multiple times, each unsubscribe will only remove one occurrence. So if someone does:

const fn = () => {};
store.subscribe(fn);
store.subscribe(fn);
const off = store.unsubscribe(fn);
off();

Then, the subscribers array would have fn added twice, and each off() call would remove one. So after two unsubscribes, it's gone.

But perhaps it's better to manage the subscribers as a Set, but since functions are not primitives, using a Set might not work because it's based on object identity. Alternatively, we can manage it as an array and when unsubscribing, remove the function once.

But for simplicity, perhaps the initial approach is to manage the subscribers as an array, and each subscribe adds the function, and each unsubscribe removes it once.

Wait, but in the example, the subscribe function returns a function that, when called, removes the listener. So each time you call subscribe, you get a new unsubscribe function. So, for example:

const off1 = store.subscribe(fn);
const off2 = store.subscribe(fn);

Each off1 and off2, when called, will remove fn from the subscribers array. So if you call off1 and off2, fn is removed twice, but if it was only added once, it's gone after the first call.

Hmm, but that's not correct. Because each time you call subscribe, you're adding the same function to the array. So if you have two unsubscribe functions, each will remove one occurrence.

Wait, perhaps the correct approach is that each call to subscribe adds the function to the array, and each unsubscribe function, when called, removes the function from the array once. So if the function was added multiple times, each unsubscribe will remove one occurrence.

But that's a bit tricky because the same function can be in the array multiple times. So when you call unsubscribe, you need to find and remove one occurrence.

Alternatively, perhaps the subscribers are stored as a Set, but since functions are objects, and each function is a new object, even if they are identical, they are different instances. So that approach might not work.

Wait, no. If the same function is passed to subscribe multiple times, each time it's the same function reference. So in that case, the same function is added multiple times to the array. So when you call unsubscribe, you can just filter it out once.

Wait, no. Because if you have the same function added multiple times, each time you call unsubscribe, you remove one occurrence.

But perhaps the intended behavior is that each function is only added once, regardless of how many times subscribe is called with the same function. Or perhaps not.

The problem statement says that unsubscribing the same listener twice is harmless. So perhaps the way to handle it is that when you call unsubscribe, it removes all instances of that function from the subscribers array.

But that's more complicated. Alternatively, perhaps the subscribers are stored as a Set, but since functions are objects, each function is a unique object, so even if you pass the same function multiple times, it's treated as the same entry.

Wait, no. Because in JavaScript, each function is a new object. So if you have the same 
…[2471 chars elided]…
e will remove one occurrence.

So, for example:

subscribers = [fn, fn]

unsubscribe is called once: subscribers becomes [fn]

unsubscribe called again: subscribers becomes empty.

So, the code handles that correctly.

Another thing to consider: when the state is updated, all subscribers are called. So in the code, after computing newState, currentState is updated, and then each subscriber is called.

Wait, but in Redux, the state is updated before notifying subscribers. So the subscribers get the new state. So the code is correct.

Now, about the types. The function needs to be generic over S and A, and the dispatch function must only accept actions of type A.

In the code above, the dispatch function is typed as (action: A) => void, which is correct.

Also, the reducer is passed as (state: S, action: A) => S, which is correct.

Testing the example:

type Action = { type: "inc" } | { type: "add"; by: number };

const store = createStore<number, Action>((state, action) => {
  switch (action.type) {
    case "inc": return state + 1;
    case "add": return state + action.by;
  }
}, 0);

store.getState(); // 0

const off = store.subscribe(() => { /* ... */ });
store.dispatch({ type: "inc" }); // state becomes 1, subscriber is called
store.dispatch({ type: "add", by: 5 }); // state becomes 6
off(); // unsubscribe

This should work as expected.

Another test case: what if the same function is subscribed multiple times?

store.subscribe(fn);
store.subscribe(fn);
const off1 = store.unsubscribe(fn);
const off2 = store.unsubscribe(fn);

Then, off1() and off2() would each remove one occurrence of fn.

But in the code, when you call off1(), it removes the first occurrence, and off2() removes the next.

So, the code should handle that.

What about if the function is not in the array? The indexOf returns -1, so it does nothing. So it's harmless.

Another thing: the subscribers array is part of the closure in createStore. So each store has its own subscribers.

I think this should cover all cases.

So, the code seems correct.