我们可以在多个对象键上使用 action.payload 吗？答案

【问题标题】：Can we use action.payload on multiple object keys?我们可以在多个对象键上使用 action.payload 吗？
【发布时间】：2022-01-03 00:06:25
【问题描述】：

我想通过此操作将任务添加到我的 Todo 应用：

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

将以这种方式发送以显示文本和日期：

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

    dispatch(addTask(`${inputFieldSlice} on: ${dateSlice}`));

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

输出将是这样的：Shopping on: 2021-11-03

我想知道这是否是正确的方法，以及我是否真的可以将action.payload 传递给对象中的两个不同键。

【问题讨论】：

您可以将它传递给您想要的所有键。如果您要将字符串传递给text 字段并将适当的时间戳传递给date 字段，这将更有意义。如果您这样做，您将获得显示值和执行日期排序功能的方法。此外，您不应该传递整个切片。希望你只需要更好的变量名。
@jmargolisvt 我实际上意识到我的方法不正确。在将日期传递给 action.payload 时，我还将输入字段的文本输入其中，因此文本和日期都具有 Shopping on: 2021-11-03 的值

标签： javascript reactjs redux react-redux redux-toolkit

【解决方案1】：

action.payload 不必是字符串。您甚至不需要将其命名为 payload 或 action。您可以简单地将对象作为有效负载传递给您想要的任何键。在这种情况下，我选择了text 和date：

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

// ...

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

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

  dispatch(clearInputField(''));
  dispatch(clearDate(''));
};

通过将它们分开存储，当你渲染任务时，你可以像这样渲染它：

<ul>
  {tasks.map((task) => (
    <li key={task.id}>
      {task.text} on: {task.date}
    </li>
  ))}
</ul>

【讨论】：