Redux store中useSelector取值始终返回undefined问题排查

useSelector返回undefined的核心原因是Redux状态的取值路径和reducer实际挂载的键名不匹配：

• 你在store.js中配置根reducer时，将userSlice对应的reducer挂载到了user字段下，此时全局Redux状态树结构为：

  {
    user: {
      interval: 15000
    }
  }
  

• 但你在slice中定义的selectoruserRefreshInterval是尝试读取state.userSettings字段，全局状态下根本不存在这个键，因此始终返回undefined。

两种方案二选一即可，保证selector路径和store挂载键一致：

• 方案1：修改selector的取值路径，适配现有store配置
  调整userSlice中的selector代码：

  // 原代码为 state.userSettings，修改为对应挂载键user
  export const userRefreshInterval = (state) => state.user;
  

• 方案2：修改store的reducer挂载键，适配现有selector
  调整store.js中的配置：

  import { configureStore } from '@reduxjs/toolkit'
  import userReducer from "./userSlice";
  
  export default configureStore({
    reducer: {
      // 将挂载键从user改为userSettings，和selector路径匹配
      userSettings: userReducer
    }
  })
  

你当前表单输入获取到的refreshInterval是字符串类型，提交更新后Redux中存储的interval值会从初始的数字类型变为字符串，如果后续需要基于该值做时间计算，建议提交时做类型转换：

const handleSubmit = (e) => {
  e.preventDefault();
  // 转成数字类型再存入Redux
  dispatch(updateInterval(Number(refreshInterval)));
};

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