React-Redux-Router路由切换时状态未重置的问题咨询

我碰到过好多次这种跨路由状态残留的问题，尤其是复用组件和Reducer的时候，确实头疼。既然你已经在处理LOCATION_CHANGE相关逻辑，那咱们可以从几个方向入手解决：

这应该是最直接的方式，毕竟你已经在关注路由变化的action了。假设你的Reducer结构如下，我们可以在里面添加路由切换的判断逻辑：

const initialState = {
  itemsPerPage: 10,
  currentPath: '', // 新增字段保存当前路由路径
  // 其他状态...
};

export const itemsReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_ITEMS_PER_PAGE':
      return { ...state, itemsPerPage: action.payload };
    case '@@router/LOCATION_CHANGE': // 注意：不同路由集成库的action类型可能不同，比如新版react-router可能用自定义类型
      const newPath = action.payload.location.pathname;
      
      // 判断是否切换到了新路由，如果是就重置itemsPerPage
      if (state.currentPath !== newPath) {
        // 你还可以加更精准的判断，比如只在特定页面间切换时重置：
        // if (newPath.startsWith('/data-list') && state.currentPath.startsWith('/data-list') && newPath !== state.currentPath) {
        return { ...state, itemsPerPage: 10, currentPath: newPath };
        // }
      }
      return { ...state, currentPath: newPath };
    default:
      return state;
  }
};

这里要注意LOCATION_CHANGE的action类型：旧版react-router-redux用的是@@router/LOCATION_CHANGE，如果是新版react-router-dom结合Redux，可能需要你自己订阅路由变化并dispatch自定义action，或者用对应的集成工具。另外，保存当前路径到state里能帮你准确判断是否发生了有效路由切换。

如果你的ItemsPerPage下拉框是复用组件，可以直接在组件内部用React Router的useLocation钩子监听路由变化，然后dispatch重置action：

import { useLocation, useEffect } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';

const ItemsPerPageDropdown = () => {
  const dispatch = useDispatch();
  const location = useLocation();
  const itemsPerPage = useSelector(state => state.items.itemsPerPage);

  useEffect(() => {
    // 每次路由切换时，重置为默认的10条
    dispatch({ type: 'SET_ITEMS_PER_PAGE', payload: 10 });
  }, [location.pathname, dispatch]);

  // 下拉框的渲染和切换逻辑...
  return (
    <select value={itemsPerPage} onChange={(e) => dispatch({ type: 'SET_ITEMS_PER_PAGE', payload: Number(e.target.value) })}>
      <option value={10}>10条/页</option>
      <option value={50}>50条/页</option>
    </select>
  );
};

这种方式更灵活，你可以根据location.pathname做精准过滤——比如只有切换到特定页面（比如/user-list和/order-list）时才重置，而不是所有路由切换都触发。另外，服务端渲染时useEffect只会在客户端执行，刚好匹配需求：服务端初始状态就是10，只有客户端切换路由才需要重置。

如果你用的是Redux Toolkit，推荐用createListenerMiddleware来分离路由监听和状态重置的逻辑，这更符合Redux的最佳实践（Reducer只处理纯状态更新，副作用放在中间件里）：

import { createListenerMiddleware, configureStore } from '@reduxjs/toolkit';
// 这里要根据你的路由集成方式导入对应的location change action
import { locationChange } from 'react-router-redux';

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

// 监听路由变化action
listenerMiddleware.startListening({
  actionCreator: locationChange,
  effect: async (action, listenerApi) => {
    const { getState, dispatch } = listenerApi;
    const previousPath = getState().router.location.pathname;
    const newPath = action.payload.location.pathname;

    // 路由切换时重置状态
    if (previousPath !== newPath) {
      dispatch({ type: 'SET_ITEMS_PER_PAGE', payload: 10 });
    }
  },
});

// 配置store时加入这个中间件
export const store = configureStore({
  reducer: {
    // 你的reducers...
    items: itemsReducer,
    router: routerReducer, // 路由相关的reducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().prepend(listenerMiddleware.middleware),
});

这种方式把路由监听逻辑从Reducer和组件中抽离出来，代码结构更清晰，也方便后续扩展其他路由相关的状态处理。

• 确认LOCATION_CHANGE的action类型正确，不同的路由库集成方式会有差异，如果找不到现成的action，可以自己用useLocation订阅路由变化并dispatch自定义action。
• 如果不是所有路由切换都需要重置状态，一定要加上路径过滤条件，避免不必要的状态更新。
• 服务端渲染时，确保初始state的itemsPerPage是10，这样首次渲染的页面都会有正确的默认值。

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