可以将action.payload赋值给对象的多个键吗？Todo应用开发实操疑问

语法可行性说明 #

把同一个action.payload赋值给对象的多个不同键在语法层面完全合法，你当前的代码可以正常运行，也能输出你预期的Shopping on: 2021-11-03效果。

现有写法的不合理之处 #

虽然能跑，但这种设计存在明显缺陷，不推荐在实际项目中使用：

• 数据冗余无意义：text和date两个字段存储了完全相同的拼接字符串，浪费存储空间的同时也丧失了字段的语义性，你无法单独通过date字段做日期筛选、格式化等操作，也无法单独修改text字段的内容，后续功能迭代会非常麻烦。
• 维护成本高：如果后续需要新增和任务文本、日期相关的功能（比如日期提醒、任务内容检索），你需要额外对拼接字符串做拆分处理，不仅开发效率低，还很容易出现匹配错误的bug。

优化方案 #

建议调整payload的传参结构，把文本和日期分开传递，渲染时再做拼接即可：

调整addTask reducer逻辑 #

addTask: (state, action) => {
  const newTask = {
    id: uuidv4(),
    text: action.payload.text,
    completed: false,
    date: action.payload.date,
  };
  state.push(newTask);
},

调整dispatch触发逻辑 #

const handleSubmit = (e) => {
  e.preventDefault();
  if (!inputFieldSlice || !dateSlice) return;

  dispatch(addTask({
    text: inputFieldSlice,
    date: dateSlice
  }));

  dispatch(clearInputField(""));
  dispatch(clearDate(""));
};

渲染层做字符串拼接 #

在需要展示的位置直接拼接两个字段即可得到你要的效果：

<strong>{`${task.text} on: ${task.date}`}</strong>

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