我们可以在多个对象键上使用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>