React/Redux：如何实现请求进入应用时的参数过滤机制？

方案1：利用React Router的导航监听（推荐，无需修改Redux中间件） #

直接在根组件或路由入口组件中，通过监听URL变化来读取查询参数并dispatch到slice。这种方式基于React Router原生能力，无需新增Redux中间件，开销极小。

代码示例：

import { useLocation } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { setFilters } from './features/filters/filtersSlice';

function App() {
  const dispatch = useDispatch();
  const location = useLocation();

  useEffect(() => {
    // 解析查询字符串
    const searchParams = new URLSearchParams(location.search);
    // 替换为你的实际查询参数名，比如filter、category等
    const filterValue = searchParams.get('filter');
    
    if (filterValue) {
      // 转换为slice需要的数据格式
      const filterData = {
        category: filterValue
        // 可根据需求添加更多参数
      };
      dispatch(setFilters(filterData));
    }
    // 无参数时不做任何操作，应用正常运行
  }, [location.search, dispatch]); // 仅当查询字符串变化时触发

  return (
    {/* 你的应用路由和组件 */}
  );
}

方案2：复用现有请求触发的中间件 #

如果你的现有中间件已经在每次请求时触发，直接在其中添加读取查询参数的逻辑即可，无需新增中间件，不会额外增加开销。

代码示例：

import { setFilters } from './features/filters/filtersSlice';

const existingRequestMiddleware = store => next => action => {
  // 匹配你现有中间件监听的请求触发action类型
  if (action.type === 'REQUEST_INITIATED') {
    // 客户端环境下读取window.location的查询参数
    const searchParams = new URLSearchParams(window.location.search);
    const filterValue = searchParams.get('filter');

    if (filterValue) {
      store.dispatch(setFilters({ category: filterValue }));
    }
  }
  return next(action);
};

关于中间件的疑问解答 #

• 不需要新增中间件：上述两种方案都能满足需求，新增中间件反而会增加不必要的全局action拦截逻辑，徒增复杂度。
• 开销问题：两种方案的开销都可以忽略不计。React Router的监听仅在查询字符串变化时触发一次；复用现有中间件只是在原有逻辑中增加了几行轻量的参数解析代码，不会对性能造成影响。

额外注意（若涉及服务端渲染） #

如果你的应用是服务端渲染（SSR），不能直接使用window.location，需要从服务端的请求对象中获取URL查询参数，在store初始化或页面加载时dispatch对应的action。比如在Next.js的getServerSideProps中解析参数后传递给组件，再dispatch到Redux。

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