如何使用JS解构语法优化mapStateToProps函数的写法

方案1：嵌套解构+对象属性简写（推荐，平衡可读性与简洁度） #

直接在参数层解构出state.data下需要的所有属性，配合对象简写语法，无需重复书写属性名：

const mapStateToProps = ({ 
  data: { 
    token, 
    anonUsername, 
    showAuthModal, 
    client_id, 
    client_secret, 
    env, 
    username, 
    invitationAuth, 
    inviteLink 
  } 
}) => ({
  token,
  anonUsername,
  showAuthModal,
  client_id,
  client_secret,
  env,
  username,
  invitationAuth,
  inviteLink
})

如果觉得参数层嵌套过长可读性差，也可以将解构逻辑放到函数内部：

const mapStateToProps = state => {
  const { 
    token, 
    anonUsername, 
    showAuthModal, 
    client_id, 
    client_secret, 
    env, 
    username, 
    invitationAuth, 
    inviteLink 
  } = state.data
  return {
    token,
    anonUsername,
    showAuthModal,
    client_id,
    client_secret,
    env,
    username,
    invitationAuth,
    inviteLink
  }
}

方案2：对象展开语法（仅适用于特定场景） #

如果你确认需要映射state.data下的全部属性，没有多余字段，可以直接用展开运算符简化为一行：

const mapStateToProps = state => ({ ...state.data })

注意：如果state.data中存在不需要传给组件的属性，不要使用该写法。多余属性的变更会触发组件不必要的重渲染，影响性能。

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