Redux Transform Stream

A TransformStream for Redux

// A few utility imports for this example
import { configureStore } from "https://esm.sh/@reduxjs/toolkit?target=deno";
import { readableStreamFromIterable } from "https://deno.land/std@0.135.0/streams/conversion.ts";

// The actual library!
import { ReduxTransformStream } from "https://deno.land/x/redux_transform_stream/mod.ts";

// The type of our Redux store's state
type State = `number`;

// The supported actions for our Redux store
type Action =
  | { type: "Increment" }
  | { type: "Decrement" };

// Define a Redux store that applies the `Action`s to our `State`
const store = configureStore<State, Action>({
  reducer: (state = 0, action) => {
    switch (action.type) {
      case "Increment":
        return state + 1;
      case "Decrement":
        return state - 1;
      default:
        return state;
    }
  },
});

// We need a `ReadableStream` of `Action`s; this utility allows us to make one from an Array, for demonstration purposes
const actionStream = readableStreamFromIterable<Action>([
  { type: "Increment" },
  { type: "Decrement" },
  { type: "Increment" },
]);

// Create a `TransformStream` from the Redux store
const transformStream = new ReduxTransformStream(store);

// By piping the stream of `Action`s through the Redux `TransformStream`, we end up with an output stream of `State`s
const stateStream = actionStream.pipeThrough(transformStream);

// Log each state; this will log the initial state (`0`) and then the updated value after each action is processed by Redux
for await (const state of stateStream) {
  console.log(state); // In sequence: 0, 1, 0, 1
}