SvelteKit中基于Svelte 5 Rune实现Redux式日志中间件方案

在SvelteKit里实现Redux风格的日志中间件，核心是抓住状态更新的入口（比如dispatch方法）或者全局监听状态变化，下面是几个成熟的实现模式：

方案1：在自定义Redux风格Store中直接嵌入日志逻辑 #

如果你是自己实现带reducer和dispatch的Redux风格Store，最直接的方式是在dispatch方法里添加日志打印——毕竟所有状态更新都要走dispatch，在这里插日志相当于Redux里的middleware作用。

代码示例：

import { writable } from 'svelte/store';

// 创建带日志的Redux风格Store
function createReduxStore(initialState, reducer) {
  const { subscribe, set } = writable(initialState);
  let currentState = initialState;

  // 同步当前状态
  subscribe(state => currentState = state);

  function dispatch(action) {
    // 打印旧状态、action、新状态
    console.group(`Action: ${action.type}`);
    console.log('旧状态:', currentState);
    console.log('触发Action:', action);
    
    const newState = reducer(currentState, action);
    set(newState);
    
    console.log('新状态:', newState);
    console.groupEnd();
  }

  return { subscribe, dispatch };
}

// 示例Reducer
const counterReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT': return { count: state.count + 1 };
    case 'DECREMENT': return { count: state.count - 1 };
    default: return state;
  }
};

// 生成Store实例
export const counterStore = createReduxStore({ count: 0 }, counterReducer);

每次调用counterStore.dispatch({ type: 'INCREMENT' })时，控制台就会输出清晰的状态变更日志，完全符合Redux的使用习惯。

方案2：在根组件中用$effect全局监听状态变化 #

如果你的Store是原生的writable/derived，或者不想修改Store内部逻辑，可以在SvelteKit的根布局（+layout.svelte）里用$effect监听所有需要日志的Store——因为根组件会贯穿整个应用生命周期，能全局捕获状态变化。

代码示例：

<script>
  import { $effect } from 'svelte';
  import { counterStore, userStore } from '$lib/stores';

  // 监听单个Store的变化
  $effect(() => {
    console.log('计数器状态更新:', $counterStore);
  });

  // 同时监听多个Store，合并打印全局状态
  $effect(() => {
    const globalState = {
      counter: $counterStore,
      user: $userStore
    };
    console.log('全局状态更新:', globalState);
  });
</script>

注意：$effect只能在组件的<script>标签内使用，这也是你之前直接在Store文件里用$effect无效的原因——Store是独立于组件的模块，不能直接使用组件专属的rune。

方案3：模拟Redux中间件机制封装通用日志功能 #

如果你想完全复刻Redux的中间件模式（方便后续扩展其他中间件，比如异步action处理），可以封装一个支持中间件的Store创建函数，把日志逻辑抽成独立的中间件。

代码示例：

import { writable } from 'svelte/store';

// 日志中间件（和Redux中间件写法一致）
const loggerMiddleware = (store) => (nextDispatch) => (action) => {
  console.group(`Action: ${action.type}`);
  console.log('旧状态:', store.getState());
  console.log('触发Action:', action);
  
  // 执行下一个中间件/原始dispatch
  const result = nextDispatch(action);
  
  console.log('新状态:', store.getState());
  console.groupEnd();
  return result;
};

// 创建支持中间件的Store
function createStoreWithMiddleware(initialState, reducer, middlewares = []) {
  const { subscribe, set } = writable(initialState);
  let currentState = initialState;

  subscribe(state => currentState = state);

  // 原始dispatch方法
  const rawDispatch = (action) => {
    const newState = reducer(currentState, action);
    set(newState);
  };

  // 组装中间件链（类似Redux的compose）
  const store = {
    subscribe,
    getState: () => currentState,
    dispatch: rawDispatch
  };

  // 倒序应用中间件，保证执行顺序正确
  middlewares.reverse().forEach(middleware => {
    store.dispatch = middleware(store)(store.dispatch);
  });

  return store;
}

// 使用示例：传入日志中间件
export const counterStore = createStoreWithMiddleware(
  { count: 0 },
  counterReducer,
  [loggerMiddleware]
);

这种方式扩展性极强，后续要加其他中间件（比如处理异步action的thunk中间件），直接加到中间件数组里就行，完全对齐Redux的生态思路。

内容的提问来源于stack exchange，提问作者Justin Lee