So, I’m going through the Redux Toolkit lessons (https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-redux/modules/wdcp-22-refactoring-with-redux-toolkit/lessons/the-redux-toolkit/exercises/slices-of-state) and I am having trouble understanding the logic behind the reducer’s ‘todos/toggleTodo’ case, especially the : todo part.
Why don’t we write: { …todo, completed: !todo.completed } : todo.completed, rather than : todo?
const state = {
todos: [
{
id: 0,
text: "Learn Redux-React",
completed: true,
},
{
id: 1,
text: "Learn Redux Toolkit",
completed: false,
}
],
visibilityFilter: "SHOW_ALL"
}
/* todosSlice.js */
const addTodo = (todo) => {
return {
type: 'todos/addTodo',
payload: todo
}
}
const toggleTodo = (todo) => {
return {
type: 'todos/toggleTodo',
payload: todo
}
}
const todos = (state = [], action) => {
switch (action.type) {
case 'todos/addTodo':
return [
...state,
{
id: action.payload.id,
text: action.payload.text,
completed: false
}
]
case 'todos/toggleTodo':
return state.map(todo =>
todo.id === action.payload.id ? { ...todo, completed: !todo.completed } : todo
)
default:
return state
}
}