REACT如何访问另一函数返回值？Redux Reducer内调用useSelector问题

核心错误点 #

• useSelector是React专属Hook，仅能在React函数组件、自定义Hook的顶层调用，不能在普通函数、Redux reducer内部调用，你的写法直接违反了Hook使用规则，会触发运行时报错
• Reducer函数的第一个入参就是当前最新的状态值，不需要额外通过Hook读取数组，直接访问state.myCities即可

正确实现代码 #

import ActionTypes from "../constants/ActionTypes";

const initialState = {
  myCities: [],
  aCity: {},
  getCityById: {},
  filteredCities: [],
};

export const WeatherReducer = (state = initialState, { type, payload }) => {
  // 直接读取当前state中的myCities调试即可
  console.log(state.myCities);
  switch (type) {
    case ActionTypes.GETBY_CITYNAME:
      return {
        ...state,
        aCity: payload,
        myCities: [...state.myCities, payload],
      };
    case ActionTypes.GETCITYBYID:
      return {
        ...state,
        getCityById: payload,
        // 直接基于当前state的myCities过滤指定id条目即可
        myCities: state.myCities.filter(
          (item) => parseInt(item.id) !== parseInt(payload.id)
        ),
      };
    default:
      return state;
  }
};

补充说明 #

如果你需要在React业务组件中读取myCities数组，再在组件顶层调用const myCitiesArray = useSelector((state) => state.allWeathers.myCities)即可，不要在reducer相关逻辑中调用React Hook。

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