Quiero agregar tareas a mi aplicación Todo con esta acción:
addTask: (state, action) => { const newTask = { id: uuidv4(), text: action.payload, completed: false, date: action.payload, }; state.push(newTask); },Que se enviará de esta manera para mostrar tanto el texto como la fecha:
const handleSubmit = (e) => { e.preventDefault(); if (!inputFieldSlice || !dateSlice) return; dispatch(addTask(`${inputFieldSlice} on: ${dateSlice}`)); dispatch(clearInputField("")); dispatch(clearDate("")); };El resultado será algo así: Comprando el: 2021-11-03
Quería saber si esta es la forma correcta de hacerlo y si realmente puedo pasar action.payload a dos claves diferentes en un objeto.
action.payload no tiene que ser una cadena. Ni siquiera necesita nombrarlo payload o action . Simplemente puede pasar un objeto como carga útil con las claves que desee. Elegí text y date en este caso:
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('')); };Almacenándolos por separado, cuando renderizas la tarea, puedes renderizarla así:
<ul> {tasks.map((task) => ( <li key={task.id}> {task.text} on: {task.date} </li> ))} </ul>