Composable Factory Pattern with Functional Middleware Pipeline

import { ref } from 'vue';
 
export function createMiddlewareComposable(...middlewares) {
  return function usePipelineInitialiser(initialValue) {
    const state = ref(initialValue);
 
    const dispatch = async (action) => {
      const runner = middlewares.reduceRight(
        (next, middleware) => (ctx) => middleware(ctx, next),
        async (ctx) => { ctx.state.value = ctx.action.payload; }
      );
 
      await runner({ state, action });
    };
 
    return { state, dispatch };
  };
}