如何从Redux slices导入state并重命名为不同变量？

JavaScript 原生对象解构本身就自带属性重命名能力，直接在解构时按 原属性名: 自定义变量名 的格式写就行，不需要额外做中转赋值，直接在取 Redux 状态的步骤就能完成重命名，彻底避免同名变量冲突。

正确代码写法 #

// 从messageReducer取状态，重命名为带业务前缀的变量
const {
  loading: messageLoading,
  success: messageSuccess,
  error: messageError
} = useAppSelector(state => state.messageReducer)

// 从offerReducer取状态，使用另一套变量名
const {
  loading: offerLoading,
  success: offerSuccess,
  error: offerError
} = useAppSelector(state => state.offerReducer)

语法说明 #

• 解构赋值冒号左侧是你要从目标对象中读取的真实属性名，也就是reducer里存的loading/success/error字段
• 解构赋值冒号右侧是你声明在当前作用域的自定义变量名，后续组件里直接用这些自定义变量即可，不会产生命名冲突

注意：你提到的期望写法 const { customName, customName1, customName2 } = {loading, success, error} 是无效的，这种写法等号右侧是对象属性简写，生成的对象属性名仍然是loading/success/error，左侧解构会尝试找对象里的customName等属性，最终得到的全是undefined。

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