Как обновить элемент списка задач в reactjs?

Question

Я использую реаги и редукции, чтобы написать приложение todolist. Вот мое начальное состояние:

export const initialState = {
todoList:[
    {
        taskId:1
        task: 'gym'
        completed: true
    },
    {
        taskId:2
        task: 'buy dinner'
        completed: false
    }
]
}

const todoReducer = (state=initialState,action) => {
switch(action.type){
    case UPDATE_TODO:
        return Object.assign({}, state, {
            todoList: state.todoList.map(todo =>
                {
                    return todo.taskId === action.payload.taskId ?
                    Object.assign({},todo, {
                        task: action.payload.task,
                        completed: action.payload.completed
                    }) : todo
                }
            )
        })
    default: 
        return state;
}
}
export default todoReducer;

Если я хочу обновить второе задание, чтобы «купить книгу» и изменить выполненное на истинное, как я могу добавить код в свой редуктор? Код выше не работает сейчас. Не уверен причина. Может ли кто-нибудь помочь?

Answer 1

Попробуйте это:

редуктор

const initialState = {
  todoList: [
    {
      taskId: 1,
      task: "gym",
      completed: true
    },
    {
      taskId: 2,
      task: "buy dinner",
      completed: false
    }
  ]
};

const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_TODO':
      const { payload } = action;
      return {
        ...state,
        todoList: state.todoList.map(item => {
          if (item.taskId === payload.taskId) {
            return {
              ...item,
              task: payload.task,
              completed: payload.completed
            };
          } else {
            return item;
          }
        })
      };
    default:
      return state;
  }
};

Модульный тест:

const output = todoReducer(initialState, {type: 'UPDATE_TODO', payload: {
    taskId: 1,
        task: "newTask",
        completed: true
}});
console.log('output', output);

тестовый вывод:

output { todoList:
   [ { taskId: 1, task: 'newTask', completed: true },
     { taskId: 2, task: 'buy dinner', completed: false } ] }