能否在Redux Reducer中使用自定义React Hook？

首先，你遇到的错误完全符合React Hook的核心规则：Hook只能在函数组件的顶层或者自定义Hook的顶层调用，绝对不能在Redux reducer这种纯函数里使用——因为reducer和React的组件渲染周期完全无关，它只是一个接收旧state和action、返回新state的纯函数，Hook依赖React内部的状态管理机制，在reducer里调用Hook会直接破坏React的状态追踪逻辑。

而且你的代码还有两个额外的问题：

• 你在reducer外部直接调用useGetDistance()，这本身就违反了Hook规则（不在组件/Hook内调用）
• getDistanceHandler是异步的（返回Promise），但Redux reducer必须是同步纯函数，异步操作在reducer里执行不仅不会生效（filter是同步的，then里修改bool的时候filter已经完成了），还会破坏Redux的状态更新逻辑。

具体解决方案 #

方案1：把距离计算逻辑抽成普通函数 #

如果你的useGetDistance Hook只是封装了距离计算的纯逻辑（比如根据经纬度计算两点距离），那可以把核心逻辑从Hook里抽出来，变成一个普通的工具函数：

// 新建 utils/distance.js
export const calculateDistance = (lat1, lon1, lat2, lon2) => {
  // 这里用Haversine公式计算两点距离（单位公里）
  const earthRadius = 6371;
  const dLat = (lat2 - lat1) * Math.PI / 180;
  const dLon = (lon2 - lon1) * Math.PI / 180;
  const a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * 
    Math.sin(dLon/2) * Math.sin(dLon/2); 
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  return earthRadius * c;
};

然后在reducer里直接导入使用：

import { calculateDistance } from '../utils/distance';

const lokaleReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_FILTERS:
      const { filters, region } = action.payload;
      const updatedFilteredLokale = state.lokale.filter((lokal) => {
        let bool = true;
        // 名称筛选
        if (filters[0]) {
          bool = lokal.name.toLowerCase().includes(filters[0].toLowerCase());
        }
        // 分类筛选
        if (bool && filters[1]) {
          bool = lokal.category.toLowerCase().includes(filters[1].toLowerCase());
        }
        // 距离筛选（同步计算）
        if (bool && filters[2]) {
          const distance = calculateDistance(
            region.latitude, 
            region.longitude, 
            lokal.latitude, 
            lokal.longitude
          );
          bool = distance <= filters[2];
        }
        return bool;
      });
      return {
        ...state,
        filteredLokale: updatedFilteredLokale
      };
    // 其他case逻辑保持不变
    default:
      return state;
  }
};

方案2：在组件中处理异步逻辑，再传递给Reducer #

如果useGetDistance涉及异步操作（比如调用浏览器Geolocation API获取用户当前位置），那应该在组件里完成这个异步操作，再把需要的数据通过action传递给reducer：

1. 在组件中使用Hook获取数据并dispatch action：

import useGetDistance from '../../handler/useGetDistance';
import { setFilters } from '../actions/lokale';
import { useDispatch } from 'react-redux';

const FilterComponent = () => {
  const getDistance = useGetDistance();
  const dispatch = useDispatch();

  const handleApplyFilters = async (filters) => {
    // 先异步获取用户位置
    const userRegion = await getDistance();
    // 把筛选条件和用户位置一起传给reducer
    dispatch(setFilters({ filters, region: userRegion }));
  };

  // 组件渲染逻辑...
};

2. 修改action creator接收完整payload：

export const setFilters = (payload) => ({
  type: SET_FILTERS,
  payload
});

方案3：用Redux中间件处理复杂异步逻辑 #

如果你的异步逻辑更复杂（比如需要从API获取数据），可以用Redux Thunk或Redux Saga这类中间件，把异步逻辑放在action creator里，完成后再dispatch同步action更新state：

以Redux Thunk为例：

// action creator
export const setFiltersWithDistance = (filters) => async (dispatch) => {
  // 用普通异步函数获取用户位置（不要用Hook）
  const userRegion = await getUserCurrentLocation();
  // 完成异步操作后dispatch同步action
  dispatch({
    type: SET_FILTERS,
    payload: { filters, region: userRegion }
  });
};

然后在组件里调用这个异步action creator即可，reducer里的逻辑和方案1保持一致。

总结 #

• 永远不要在Redux reducer里使用React Hook，这直接违反Hook规则
• Reducer必须是同步纯函数，绝对不能包含异步操作
• 纯计算逻辑抽成普通工具函数，异步逻辑放在组件或Redux中间件中处理

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