如何在Reach Router中监听路由变化并更新Redux Store值

没问题，这是个很常见的场景，用Reach Router自带的钩子配合React的useEffect就能轻松搞定。下面是具体的实现步骤和代码示例：

核心思路 #

Reach Router提供了useLocation钩子，它会返回当前路由的位置对象（包含pathname、search、hash等信息）。当路由发生变化时，这个对象会生成新的引用，我们只需要把它作为useEffect的依赖项，就能在路由变化时自动触发effect逻辑，进而更新Redux Store。

具体实现步骤 #

1. 导入所需依赖 #

推荐在全局的App组件或者路由根组件中实现这个逻辑，这样能监听所有路由变化。先导入需要的钩子和Redux相关内容：

import React, { useEffect } from 'react';
import { useLocation } from '@reach/router';
import { useDispatch } from 'react-redux';
// 导入你自定义的Redux action creator
import { updateCurrentRoute } from './redux/actions';

2. 在组件中编写监听逻辑 #

获取当前路由位置和Redux的dispatch函数，然后在useEffect中执行更新操作：

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

  // 路由变化时触发此effect
  useEffect(() => {
    // 可根据需求选择传递整个location对象，或者仅传递pathname
    dispatch(updateCurrentRoute(location.pathname));
  }, [location.pathname, dispatch]); // 依赖pathname，仅当路径变化时触发

  return (
    <div className="app-container">
      {/* 你的路由组件和其他应用内容 */}
    </div>
  );
};

export default App;

3. 定义Redux的Action和Reducer #

为了让Redux能正确处理路由更新，需要定义对应的action和reducer：

Action Creator（redux/actions.js）

export const updateCurrentRoute = (routePath) => ({
  type: 'UPDATE_CURRENT_ROUTE',
  payload: routePath
});

Reducer（redux/reducers.js）

const initialState = {
  currentRoute: '/' // 初始路由设为根路径
};

export const appReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_CURRENT_ROUTE':
      return {
        ...state,
        currentRoute: action.payload
      };
    default:
      return state;
  }
};

可选优化 #

• 如果你只关心路由的pathname变化（忽略search或hash的变化），就用上面示例中的location.pathname作为依赖；如果需要监听所有路由相关变化（比如查询参数改变），直接把location作为依赖即可。
• 若需要更严谨的性能优化，可以用useCallback包裹dispatch逻辑，但useDispatch返回的函数本身是稳定的，大多数场景下不需要额外处理。

注意事项 #

确保你的React应用已经正确配置了Redux的Provider，将Redux Store传递给整个应用，否则useDispatch无法正常工作。

内容的提问来源于stack exchange，提问作者Banedict Fring Drong