在同一.jsx页面使用setReduxObject与selectReduxObject是否可行？

这种在组件里既触发状态更新（dispatch）又读取状态（useSelector）的写法，是Redux开发中的常规操作，完全符合Redux的设计逻辑，你的代码思路是没问题的。不过实际使用中需要注意以下几个点：

1. 避免重复发起异步请求 #

你的代码里用空依赖的useEffect只执行一次请求，但如果组件重新挂载（比如路由跳转后回到Shop页面），或者Redux状态被重置（比如页面刷新），会再次发起请求。如果你的categories数据不会频繁变化，可以在请求前先判断状态是否已有数据，避免重复调用接口：

useEffect(() => {
  // 只有当categoriesMap为空时才发起请求
  if (Object.keys(categoriesMap).length === 0) {
    const getCategoriesMap = async () => {
      const categories = await getCategoriesAndDocuments();
      dispatch(setCategoriesMap(categories));
    };
    getCategoriesMap();
  }
}, [dispatch, categoriesMap]); // 记得添加依赖，避免eslint警告和逻辑错误

2. 处理加载与错误状态 #

当前代码里，接口请求过程中categoriesMap是空对象，用户会看到空白页面。建议在Redux的categories状态中加入isLoading和error字段，组件里读取这些状态来优化用户体验：

• 请求发起时设置isLoading: true，请求完成后设为false
• 请求失败时捕获错误，存入error字段
• 组件中根据状态显示加载动画、错误提示或正常内容：

// 假设selector已包含加载和错误状态
const { categoriesMap, isLoading, error } = useSelector(selectCategoriesState);

if (isLoading) return <div>加载中...</div>;
if (error) return <div>加载失败：{error}</div>;

return (
  <div>
    {Object.keys(categoriesMap).map((key) => (
      <Category key={key} title={key} products={categoriesMap[key]} />
    ))}
  </div>
);

3. 保证Selector的稳定性 #

如果你的selectCategoriesMap是直接从state中取值的简单函数，建议改用reselect库创建记忆化（memoized）的Selector。这样只有当对应的Redux状态真正变化时，Selector才会返回新值，避免组件不必要的重渲染：

// categories.selector.js
import { createSelector } from 'reselect';

// 基础Selector：获取categories状态切片
const selectCategoriesSlice = (state) => state.categories;

// 记忆化Selector：只在categoriesMap变化时返回新值
export const selectCategoriesMap = createSelector(
  [selectCategoriesSlice],
  (categoriesSlice) => categoriesSlice.categoriesMap
);

4. 捕获异步请求的错误 #

你的代码没有处理接口请求失败的情况，一旦Firebase请求出错，组件会一直显示空白。建议在异步函数中加入try/catch，捕获错误并dispatch到Redux状态中：

const getCategoriesMap = async () => {
  try {
    const categories = await getCategoriesAndDocuments();
    dispatch(setCategoriesMap(categories));
  } catch (err) {
    // 假设你已经定义了处理错误的action
    dispatch(setCategoriesError(err.message));
  }
};

5. 注意useEffect的依赖数组 #

虽然Redux的dispatch函数通常是稳定的，但为了符合React Hooks的规则和避免eslint警告，建议将其加入useEffect的依赖数组。如果在useEffect中用到了categoriesMap，也要把它加入依赖，确保逻辑能正确触发。

内容的提问来源于stack exchange，提问作者chu-js