如何在JS中实现生成指定结构对象的函数 用于react-redux reducer场景

核心需求 #

在reducer开发中，需要调用函数传入两个参数（动态键名、对应值），返回如下固定结构的对象：

{
  reducer: {
    AA: BB
  }
}

实现代码 #

基础版（仅生成目标结构） #

利用ES6计算属性名实现动态键绑定，代码如下：

// 箭头函数简写形式
const objectCreator = (AA, BB) => ({ reducer: { [AA]: BB } })

如果需要写完整函数形式方便加额外逻辑：

const objectCreator = (key, value) => {
  // 此处可以加参数校验等自定义逻辑
  return {
    reducer: {
      [key]: value
    }
  }
}

扩展版（支持合并原有reducer属性） #

如果需要保留当前reducer中已有的其他键值对，避免覆盖，可以用扩展运算符改造：

const objectCreator = (key, value, existReducer = {}) => ({
  reducer: {
    ...existReducer,
    [key]: value
  }
})

使用示例 #

调用函数传入对应参数即可得到目标结构：

// 示例：生成key为user、值为用户信息的结构
const result = objectCreator('user', { id: 1, name: '张三' })

// 输出结果
// {
//   reducer: {
//     user: { id: 1, name: '张三' }
//   }
// }

注意事项 #

• 动态键必须用[]包裹，也就是计算属性语法，否则会把变量名直接作为固定键，无法实现动态生成效果
• 该写法完全兼容redux的reducer返回值规范，不会出现不可序列化的问题

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