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

Question

我想通过此操作将任务添加到我的 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(""));
  };

输出将是这样的：购物时间：2021-11-03

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

Answer 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>

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

Can we use action.payload on multiple object keys?

javascript

reactjs

redux

react-redux

redux-toolkit