使用Redux Toolkit的createListenerMiddleware存状态到LocalStorage是否可行？

现有方案的问题 #

你当前的实现思路方向是对的，但存在几个可优化的点：

• 无需创建两个listenerMiddleware实例，单个实例即可监听多个action
• 仅监听increment和decrement会有遗漏：若counterSlice后续新增其他修改状态的action（比如重置、批量增减），这类操作不会触发LocalStorage更新，导致状态不一致
• 直接调用store.getState()存在变量提升风险（store在代码后方才定义），实际上effect参数已提供getState方法，使用它更安全
• 代码重复度高，两个监听逻辑完全一致

更合理的实现方式 #

方式一：优化Listener Middleware #

用单个监听中间件，匹配所有修改counter状态的action，同时利用effect自带的getState方法：

import { configureStore, createListenerMiddleware, isAnyOf } from "@reduxjs/toolkit";
import counterSlice, { decrement, increment, reset } from "../Slices/counterSlice";

// 创建单个监听中间件
const listenerMiddleware = createListenerMiddleware();

// 匹配所有修改counter的action，可根据slice实际action扩展
listenerMiddleware.startListening({
  matcher: isAnyOf(increment, decrement, reset),
  effect: (_, listenerApi) => {
    // 用listenerApi提供的getState获取最新状态
    const counterState = listenerApi.getState().counter;
    localStorage.setItem('count', JSON.stringify(counterState));
  }
});

// 读取预加载状态，增加异常捕获防止非法JSON
let preloadedCounterState = { value: 0 };
try {
  const savedState = localStorage.getItem('count');
  if (savedState) {
    preloadedCounterState = JSON.parse(savedState);
  }
} catch (e) {
  console.error('读取LocalStorage状态失败:', e);
}

export const store = configureStore({
  preloadedState: {
    counter: preloadedCounterState
  },
  reducer: {
    counter: counterSlice
  },
  middleware: (getDefaultMiddleware) => 
    getDefaultMiddleware().concat(listenerMiddleware.middleware)
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

方式二：使用store.subscribe()（更简洁） #

如果不需要针对特定action做差异化处理，Redux原生的store.subscribe()更简单，它会在每次状态更新后触发：

import { configureStore } from "@reduxjs/toolkit";
import counterSlice from "../Slices/counterSlice";

// 读取预加载状态，增加异常捕获
let preloadedCounterState = { value: 0 };
try {
  const savedState = localStorage.getItem('count');
  if (savedState) {
    preloadedCounterState = JSON.parse(savedState);
  }
} catch (e) {
  console.error('读取LocalStorage状态失败:', e);
}

export const store = configureStore({
  preloadedState: {
    counter: preloadedCounterState
  },
  reducer: {
    counter: counterSlice
  }
});

// 订阅状态更新，每次更新后保存到LocalStorage
store.subscribe(() => {
  const counterState = store.getState().counter;
  localStorage.setItem('count', JSON.stringify(counterState));
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

方案选择 #

• 若需要针对特定action做额外逻辑（比如某些action不触发保存、保存前做数据处理），Listener Middleware更灵活
• 若只是简单的全局状态更新后统一保存，store.subscribe()代码更简洁，维护成本更低

内容的提问来源于stack exchange，提问作者Mr.Nobody