React Reducer设置initialState为useState值的报错解决

你遇到的Invalid hook call报错，本质是踩了React Hooks的硬性规则：useState这类Hook，只能在函数组件的函数体内部、自定义Hook的顶层执行，调用时必须绑定对应的React组件渲染上下文。
你在模块顶层导出initialState的位置直接调用userGlobaleCount()，这行代码的执行时机是Redux store的初始化阶段——这个阶段比所有React组件的渲染、挂载都要早，根本不存在任何React组件的运行上下文，自然没法正常执行Hook，直接抛出报错。

先明确一个核心前提：Redux的initialState是和React渲染流程完全解耦的纯静态配置，没法直接把组件内部的Hook状态值硬塞给它。根据你的实际使用场景，选对应的实现方式就行：

• 场景1：要拿的初始值是写死的固定配置（比如示例里的60）
  根本没必要绕一圈用useState取值，直接把这个值抽成独立的全局常量，同时供Redux初始值和组件内的useState用，从根上避免跨上下文调用Hook的问题。
  代码示例：

  // 抽离独立的全局配置常量，完全脱离React组件作用域
  export const USER_DEFAULT_COUNT = 60;
  export const defaultCount = {
    start: 0,
    num: USER_DEFAULT_COUNT,
  };
  // Redux初始值直接引用常量，无任何Hook调用
  export const initialState = {
    num: defaultCount.num
  };
  

  组件里要用这个值的时候，直接复用同一个常量当useState的初始值，保证两处数据一致：

  // 在组件内部调用Hook，完全符合规则
  const [userCount] = useState(USER_DEFAULT_COUNT);
  

• 场景2：要拿的初始值是需要动态获取的（比如本地缓存存的用户自定义配置、接口拉取的用户偏好）
  别硬把动态值塞给Redux的静态initialState。正确流程是先给Redux配好兜底默认值，等组件正常拿到动态值后，通过dispatch action同步到Redux状态里：
  1. 先定义Redux的兜底初始值、同步用的action和对应的reducer逻辑：

     // Redux兜底初始值，保证store初始化时不会缺数据
     export const initialState = {
       num: defaultCount.num
     };
     // 定义同步用户自定义计数值的action
     const SYNC_USER_CUSTOM_COUNT = 'user/syncCustomCount';
     export const syncUserCustomCount = (count: number) => ({
       type: SYNC_USER_CUSTOM_COUNT,
       payload: count
     });
     // reducer处理逻辑
     export const countReducer = (state = initialState, action) => {
       switch (action.type) {
         case SYNC_USER_CUSTOM_COUNT:
           return {...state, num: action.payload};
         default:
           return state;
       }
     };
     

  2. 在应用根组件的初始化逻辑里，正常用useState拿动态值，再dispatch给Redux：

     function AppRoot() {
       // 在组件函数体内部调用useState，完全符合Hook规则
       const [userCustomCount] = useState(() => {
         // 这里可以随便写动态取值逻辑，比如读本地缓存、算用户自定义值
         return Number(localStorage.getItem('userDefinedCount')) || 60;
       });
       const dispatch = useDispatch();
       // 组件挂载后把拿到的动态值同步给Redux
       useEffect(() => {
         dispatch(syncUserCustomCount(userCustomCount));
       }, [userCustomCount, dispatch]);
       // ... 其他应用逻辑
     }
     

千万别在Redux相关的模块文件里导入、调用任何React Hooks。Redux store的创建时机比所有React组件的渲染都早，这个阶段根本没有React组件上下文，不管怎么包装调用Hook的函数，只要是在store初始化的执行链路上，一定会抛无效Hook调用的错。

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