Làm cách nào để cập nhật giá trị của đối tượng lồng nhau trong bộ giảm tốc?

Question

tôi đã xây dựng nhà nước của tôi như vậy

const list = { 
    categories: { 
    Professional: { 
    active: false, 
    names: [ 
     { 
     id: 1, 
     name: "Golf", 
     active: false 
     }, 
     { 
     id: 2, 
     name: "Ultimate Frisbee", 
     active: false 
     } 
    ] 
}} 

Trong hành động của tôi, tôi đã thêm một tùy chọn ID vì vậy tôi muốn thay đổi trạng thái hoạt động khi người dùng nhấp vào tùy chọn để làm như vậy

Tôi đang sử dụng JS bất biến mặc dù không kết hôn với nó. Tôi tự hỏi làm thế nào tôi có thể nhắm mục tiêu id của đối tượng và cập nhật trạng thái hoạt động của nó trong một bộ giảm tốc? Tôi cũng mở ra phản hồi về cách cải thiện trạng thái của mình tốt hơn

Answer 1

Đây là điều rất phổ biến và thực sự khá khó khăn. Theo như tôi biết, không có giải pháp thực sự tốt và được chấp nhận trong JS đơn giản. Ban đầu, cách tiếp cận Object.assign đã được sử dụng:

return Object.assign({}, state, { 
    categories: Object.assign({}, state.categories, { 
    Professional: Object.assign({}, state.Professional, { 
     active: true 
    }) 
    }) 
}); 

này là quá đơn giản và cồng kềnh, tôi thừa nhận điều đó, nhưng tôi có thể nói rằng chúng tôi đã xây dựng vài ứng dụng lớn với phương pháp tiếp cận này, và ngoại trừ số ký tự đó là không tệ. Ngày nay, phương pháp phổ biến nhất là sử dụng Object spread:

return { 
    ...state, 
    categories: { 
    ...state.categories, 
    Professional: { 
     ...state.categories.Professional, 
     active: true 
    } 
    } 
} 

Cách tiếp cận thứ hai là nhiều hơn nữa sạch hơn, vì vậy nếu bạn sử dụng đồng bằng JS, sau đó nó có vẻ như một lựa chọn tốt. Trong Immutable.js Tôi phải thừa nhận nó là dễ dàng hơn, bạn chỉ cần làm tiếp theo

return state.updateIn(['categories', 'Professional'], x => x.set('active', true)); 

Nhưng nó có đó là nhược điểm riêng và hãy cẩn thận, vì vậy nó là tốt hơn để suy nghĩ về nó nghiêm túc trước khi cam kết với nó.

Và câu hỏi cuối cùng của bạn về cải thiện trạng thái - thường tốt hơn là không được làm tổ sâu (tách biệt mối quan tâm của bạn, trường thường không phụ thuộc vào nhau - như trạng thái active có thể được tách riêng với đối tượng khác), nhưng rất khó để nói vì không có kiến ​​thức về tên miền của bạn. Ngoài ra, nó được coi là điều bình thường để normalize dữ liệu của bạn.

Answer 2

Phần tài liệu Redux trên Structuring Reducers bao gồm điều này. Cụ thể, xem phần trên Immutable Update Patterns. Các ví dụ được đưa ra là dành cho các đối tượng JS và mảng thuần, nhưng cách tiếp cận tương tự áp dụng - map() trong danh sách, trả lại mục hiện tại cho mọi thứ bạn không muốn cập nhật và trả về phiên bản mới cho một bạn do muốn cập nhật.

Mỗi tài liệu, cũng lưu ý rằng việc cập nhật một mục cụ thể dễ dàng hơn nếu dữ liệu của bạn được lưu trữ trong cấu trúc bình thường, vì bạn có thể tìm kiếm trực tiếp bằng ID. Phần "Cấu trúc Hộp số" cũng bao gồm chuẩn hóa.