Tôi chỉ muốn thêm một số khác biệt thực dụng so với khi tôi làm mã RxJS lấy cảm hứng từ Redux.
Tôi đã ánh xạ từng loại hành động vào một đối tượng Chủ đề. Mỗi thành phần trạng thái sẽ có một Chủ đề sau đó được ánh xạ vào một hàm giảm thiểu. Tất cả các luồng giảm tốc được kết hợp với merge
và sau đó scan
xuất ra trạng thái. Giá trị mặc định được đặt startWith
ngay trước scan
. Tôi đã sử dụng publishReplay(1)
cho các tiểu bang, nhưng có thể xóa nó sau này.
Chức năng kết xuất thuần túy phản ứng sẽ chỉ ở nơi bạn tạo ra dữ liệu sự kiện bằng cách gửi tất cả các nhà sản xuất / Chủ thể.
Nếu bạn có các thành phần con, bạn cần mô tả cách các trạng thái đó được kết hợp thành của bạn. combineLatest
có thể là một điểm khởi đầu tốt cho điều đó.
Sự khác biệt đáng chú ý trong việc triển khai:
Không có phần mềm trung gian, chỉ có các toán tử rxjs. Tôi nghĩ đây là sức mạnh và điểm yếu lớn nhất. Bạn vẫn có thể mượn các khái niệm, nhưng tôi thấy khó nhận được sự trợ giúp từ các cộng đồng chị em như redux và cycle.js vì đây là một giải pháp tùy chỉnh khác. Đó là lý do tại sao tôi cần viết "I" thay vì "we" trong văn bản này.
Không có công tắc / trường hợp hoặc chuỗi cho các loại hành động. Bạn có một cách năng động hơn để tách các hành động.
rxjs có thể được sử dụng như một công cụ ở nơi khác và không bị quản lý nhà nước.
Số lượng nhà sản xuất ít hơn các loại hành động (?). Tôi không chắc về điều này, nhưng bạn có thể có nhiều phản ứng trong các thành phần cha lắng nghe các thành phần con. Điều đó có nghĩa là mã ít bắt buộc hơn và ít phức tạp hơn.
Bạn sở hữu giải pháp. Không cần khuôn khổ. Tốt và xấu. Dù sao đi nữa, bạn cũng sẽ viết ra khuôn khổ của riêng mình.
Nó phức tạp hơn nhiều và bạn có thể dễ dàng đăng ký các thay đổi từ một cây con hoặc nhiều phần của cây trạng thái ứng dụng.
- Đoán xem sử thi dễ dàng như redux-obseravble làm như thế nào? Thật sự dễ dàng.
Tôi cũng đang nỗ lực vì những lợi ích lớn hơn nhiều khi các thành phần con được mô tả là các luồng. Điều này có nghĩa là chúng ta không phải tổng hợp trạng thái cha và con trong bộ giảm, vì chúng ta có thể ("just") kết hợp đệ quy các trạng thái dựa trên cấu trúc thành phần.
Tôi cũng nghĩ về việc bỏ qua phản ứng và sử dụng snabbdom hoặc thứ gì đó khác cho đến khi React xử lý các trạng thái phản ứng tốt hơn. Tại sao chúng ta nên xây dựng trạng thái của mình trở lên chỉ để phá vỡ nó thông qua đạo cụ một lần nữa? Vì vậy, tôi sẽ cố gắng tạo phiên bản 2 của mẫu này với Snabbdom.
Đây là một đoạn mã nhỏ nhưng nâng cao hơn trong đó tệp state.ts tạo luồng trạng thái. Đây là trạng thái của thành phần ajax-form nhận một đối tượng của các trường (đầu vào) với các quy tắc xác thực và kiểu css. Trong tệp này, chúng tôi chỉ sử dụng tên trường (khóa đối tượng) để kết hợp tất cả các trạng thái con thành trạng thái biểu mẫu.
export default function create({
Observable,
ajaxInputs
}) {
const fieldStreams = Object.keys(ajaxInputs)
.map(function onMap(fieldName) {
return ajaxInputs[fieldName].state.stream
.map(function onMap(stateData) {
return {stateData, fieldName}
})
})
const stateStream = Observable.combineLatest(...fieldStreams)
.map(function onMap(fieldStreamDataArray) {
return fieldStreamDataArray.reduce(function onReduce(acc, fieldStreamData) {
acc[fieldStreamData.fieldName] = fieldStreamData.stateData
return acc
}, {})
})
return {
stream: stateStream
}
}
Mặc dù mã có thể không nói lên nhiều điều riêng biệt, nhưng nó cho thấy cách bạn có thể xây dựng trạng thái trở lên và cách bạn có thể tạo ra các sự kiện động một cách dễ dàng. Cái giá phải trả là bạn cần phải hiểu một kiểu mã khác. Và tôi thích trả giá đó.