Cải tiến ứng dụng todo làm chức năng XÓA với redux

Nối tiếp bài viết mở đầu về redux https://zezo.dev/view/lam-quen-voi-redux-trong-react-native 

Để thực hiện được các bước trong bài này, bạn cần thực hiện code ở bài trên chạy được trước.

Cần cải tiến ở Reducer để thêm action xóa  (deleteTodo) và cải tiến ở screen để thêm text xóa

Vào file todoReducer thêm hàm xóa đặt ở sau hàm addTodo

 deleteTodo (state, action){
            // xóa phần tử ra khỏi mảng
            // điều kiện gọi hàm: truyền vào cho hàm payload là id của dòng cần xóa
            state.listTodo = state.listTodo.filter(row => row.id !== action.payload);
 },

Không quên export hàm deleteTodo 

Viết hàm xóa, tham số cho hàm là ID của dòng

// hàm xử lý xóa
  const handleDeleteTodo = (id)=>{
      dispatch(deleteTodo (id));
  }

Xuống phần View, viết nút bấm xóa như phần chọn trong ảnh. 

Chú ý không được quên import thêm action
 

Chạy ứng dụng và thử nghiệm thao tác xóa