Thay đổi dữ liệu sản phẩm trong Redux store

Chúng ta đã học cách thêm sản phẩm, vậy nếu chúng ta muốn thay đổi thông tin về sản phẩm thì sao? Hãy cùng xem cách thực hiện điều đó trong bài học này và các bài học tiếp theo.

Hãy mở ứng dụng sản phẩm của chúng ta và đi đến tệp productsSlice.js. Chúng ta sẽ bắt đầu bằng việc cần viết thêm một reducer nữa cho slice products, reducer này sẽ được kích hoạt khi cập nhật sản phẩm. Hãy đặt tên nó là productUpdated và thêm vào trường reducers sau reducer productAdded. Đồng thời truyền ngay cho nó các tham số state và action, dựa trên đó, như chúng ta nhớ, reducer hoạt động:

products/productsSlice.jsreducers: {
  productAdded(state, action) {
    state.push(action.payload)
  },
  productUpdated(state, action) {},
},

Bây giờ hãy suy nghĩ xem chúng ta cần những dữ liệu nào để cập nhật sản phẩm. Trước hết là id, thông qua nó chúng ta có thể tìm thấy sản phẩm mà chúng ta quan tâm trong store. Các dữ liệu còn lại - tên, mô tả, giá và số lượng sẽ được chúng ta dùng để thay đổi. Tất cả các giá trị này chúng ta sẽ nhận được từ thuộc tính payload của đối tượng action, đối tượng sẽ đến với chúng ta, và, nếu chúng ta viết nó bằng tay, thì nó sẽ trông như thế này, như được hiển thị dưới đây. Lưu ý rằng giá trị mong đợi của thuộc tính payload - là một đối số, vì vậy chúng ta sẽ truyền vào đây một đối tượng (chúng ta sẽ nói về điều này trong phần tiếp theo):

jsx{
  type: 'products/productUpdated',
  payload: {id, name, desc, price, amount}
}

Sau khi làm rõ những điểm chính, bây giờ chúng ta có thể viết code trong dấu ngoặc nhọn cho productUpdated. Đầu tiên hãy lấy từ đối tượng action dữ liệu đã thay đổi:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
},

Bây giờ chúng ta sẽ tìm sản phẩm cần thay đổi theo id đã nhận được:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
  const desiredProduct = state.find(product => product.id === id)
},

Nếu sản phẩm như vậy được tìm thấy trong store, thì chúng ta sẽ thay thế dữ liệu của nó bằng các giá trị mới:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
  const desiredProduct = state.find(product => product.id === id)
  if (desiredProduct) {
    desiredProduct.name = name
    desiredProduct.desc = desc
    desiredProduct.price = price
    desiredProduct.amount = amount
  }
},

Chúng ta chỉ cần xuất action creator để sử dụng trong component, điều mà createSlice sẽ hào phóng tạo ra cho chúng ta. Hãy thêm nó vào phần xuất ở cuối tệp, cùng với productAdded hiện có:

products/productsSlice.jsexport const { productAdded, productUpdated } = productsSlice.actions