在任何 Todo List 的 App 中，除了新增和完成項目之外，刪除待辦事項也是一個非常重要的功能。畢竟隨著時間的推移，有些事項可能已經不再需要或是想要從清單中清除已完成的項目。今天，我們就一起來完成這個功能。

在狀態中加入刪除功能

我們首先需要在 reducer 中加入一個新的 action，這裡命名為 DELETE_ITEM。當這個 action 被觸發時，我們將使用 filter 函式去過濾掉指定的待辦事項。

case 'DELETE_ITEM':
  return {
    ...state,
    todos: state.todos.filter((todo) => todo.id !== action.payload)
  }

上面新增的程式碼，當 DELETE_ITEM 被觸發，我們會從 todos 陣列中過濾掉符合 action.payload 條件的項目。

在 List 元件加入刪除功能

刪除行為

在 List 元件中，新增一個 handleDeleteItem 並傳入 Item 中去比對 item.id。

const handleDeleteItem = (id) => {
  dispatch({ type: 'DELETE_ITEM', payload: id })
}

const renderItem = ({ item }) => (
  <Item
    item={item}
    onToggleItem={() => handleToggleItem(item.id)}
    onDeleteItem={() => handleDeleteItem(item.id)}
  />
)

加入 TouchableOpacity 元件

預想中會在每一項待辦事項都會有一個刪除按鈕。所以，我們又要再次使用 TouchableOpacity 元件，並且裡面包含一個 Text 來顯示刪除文字。

const Item = ({ item, onToggleItem, onDeleteItem }) => (
  <View style={styles.item}>
    <View style={styles.checkboxAndText}>
      <Checkbox
        value={item.checked}
        onValueChange={onToggleItem}
        color={item.checked && '#1dee98'}
      />
      <Text style={[styles.itemText, item.checked && styles.finishItemText]}>
        {item.text}
      </Text>
    </View>
    <TouchableOpacity onPress={onDeleteItem}>
      <Text style={{ color: '#fff' }}>刪除</Text>
    </TouchableOpacity>
  </View>
)

當按下刪除按鈕時，它將觸發 onDeleteItem，並通知我們的 dispatch 以刪除該項目。

以上我們就成功地為待辦事項新增了刪除功能。現在，不僅可以新增和標記項目，還可以輕鬆地刪除它們，已經越來越實用了。

雖然我們的 App 已經很實用，但外觀和用戶體驗還是有很大的進步空間。在下一篇文章中，我們將探索如何使用 Expo 的 Icons 來美化 App 的界面，使其更為吸引人並增強用戶的互動體驗。