Cải tiến ứng dụng todo làm chức năng Sửa với redux

Nối tiếp bài viết về chức năng xóa https://zezo.dev/view/cai-tien-ung-dung-todo-lam-chuc-nang-xoa-voi-redux

Tác động đến reducer để tạo hàm sửa, cải tiến phần giao diện

Vào file todoReducer thêm hàm updateTodo

updateTodo (state, action){
           // lấy tham số truyền vào
           const {id, title} = action.payload;
           // tìm bản ghi phù hợp với tham số truyền vào
           const todo = state.listTodo.find(row => row.id === id);
           // update
           if(todo){
               todo.title = title; // gán giá trị
           }
}

Cải tiến giao diện

Khai báo state để xác định bản ghi nào cần sửa

// Dành cho sửa: Cần có state lưu trạng thái đang sửa bản ghi nào
  const [editTitle, setEditTitle] = useState('');// chuỗi tiêu đề
  const [idEdit, setIdEdit] = useState(null); //lưu id bản ghi cần sửa

Viết các hàm tương tác sửa

const handleEdit = (id, title) =>{
      // hàm này để  ẩn hiện form sửa
      setEditTitle(title);
      setIdEdit(id);
  }
  // hàm lưu kết quả sửa
  const handleUpdate =()=>{
      if(editTitle.trim() !== ''){
          // có nội dung sửa
          dispatch( updateTodo ({id: idEdit, title: editTitle }) );
          setEditTitle('');
          setIdEdit(null);
      }
  }

Cải tiến phần return

return (
      <View>
          <TextInput placeholder="Nhập công việc" onChangeText={setTitle} />
          <View style={{width:100}}>
              <Button title="Thêm việc" onPress={handleAddTodo} />
          </View>
          {/* in danh sách todo: */}
          {
              listTodo.map(row =>(
                <View key={row.id}
                 style={{margin:10,padding:10, borderColor:'blue', borderWidth:1}}>
                 
                  {
                      (idEdit === row.id)?
                          (<>
                              <TextInput
                                      value={editTitle}
                                      onChangeText={setEditTitle}
                                      onBlur={handleUpdate}
                                      autoFocus
                                  />
                                  <Button title="Update" onPress={handleUpdate} />
                          </>
                          )
                      :
                          (
                              <>
                                <Text>{row.title}  -  {row.id}</Text>
                                  <TouchableOpacity onPress={()=>handleDeleteTodo(row.id)} >
                                      <Text style={{color: 'red'}}>Xóa</Text>
                                  </TouchableOpacity>
<TouchableOpacity onPress={() => handleEdit(row.id, row.title)}>
                                      <Text>Edit</Text>
                                  </TouchableOpacity>

                              </>

                          )
                  }
                 
                </View> 
              ))
          }
      </View>
  );

Chạy lại ứng dụng và thử nghiệm chức năng sửa