Tôi biết Redux là một "triển khai" tốt hơn của Flux, hay nói tốt hơn đó là một thiết kế lại để đơn giản hóa mọi thứ (quản lý trạng thái ứng dụng).
Tôi đã nghe rất nhiều về lập trình phản ứng (RxJS), nhưng tôi vẫn chưa tìm hiểu nó.
Vì vậy, câu hỏi của tôi là: có bất kỳ điểm giao nhau nào (điểm chung) giữa hai công nghệ này hay chúng bổ sung cho nhau? ... hay hoàn toàn khác?
Câu trả lời:
Nói tóm lại, chúng là những thư viện rất khác nhau cho những mục đích rất khác nhau, nhưng có một số điểm tương đồng mơ hồ.
Redux là một công cụ để quản lý trạng thái trong toàn bộ ứng dụng. Nó thường được sử dụng làm kiến trúc cho giao diện người dùng. Hãy coi nó như một sự thay thế cho (một nửa của) Angular.
RxJS là một thư viện lập trình phản ứng. Nó thường được sử dụng như một công cụ để thực hiện các tác vụ không đồng bộ trong JavaScript. Hãy coi nó như một sự thay thế cho Lời hứa.
Lập trình phản ứng là một mô hình (cách làm việc và suy nghĩ) nơi các thay đổi dữ liệu được quan sát từ xa . Dữ liệu không bị thay đổi từ xa .
Đây là một ví dụ về thay đổi từ một khoảng cách :
// In the controller.js file
model.set('name', 'George');
Các mẫu được thay đổi từ Controller.
Đây là một ví dụ về quan sát từ xa :
// logger.js
store.subscribe(function (data) {
console.log(data);
});
Trong Logger, chúng tôi quan sát các thay đổi dữ liệu xảy ra trong Store (từ xa) và ghi vào bảng điều khiển.
Redux chỉ sử dụng mô hình Reactive một chút: Store là phản ứng. Bạn không đặt nội dung của nó từ xa. Đó là lý do tại sao không có store.set()trong Redux. Cửa hàng quan sát các hành động từ xa và tự thay đổi. Và Cửa hàng cho phép người khác quan sát dữ liệu của mình từ xa.
RxJS cũng sử dụng mô hình Reactive, nhưng thay vì là một kiến trúc, nó cung cấp cho bạn các khối xây dựng cơ bản, Observables , để thực hiện mô hình "quan sát từ xa" này.
Để kết luận, những điều rất khác nhau cho các mục đích khác nhau, nhưng hãy chia sẻ một số ý tưởng.
Chúng là những thứ rất khác nhau.
RxJS có thể được sử dụng để lập trình phản ứng và là một thư viện rất kỹ lưỡng với hơn 250 toán tử.
Và Redux được mô tả trên github repo "Redux là một vùng chứa trạng thái có thể đoán trước cho các ứng dụng JavaScript".
Redux chỉ là một công cụ để xử lý trạng thái trong ứng dụng. Nhưng so sánh, bạn có thể xây dựng một ứng dụng đầy đủ chỉ trong RxJS.
Hi vọng điêu nay co ich :)
Redux chỉ là một thư viện quản lý nhà nước với các tiêu chuẩn được xác định rõ ràng cho các hoạt động cập nhật. Miễn là bạn tuân thủ các tiêu chuẩn, bạn có thể giữ cho luồng dữ liệu của mình ổn định và dễ dàng suy luận. Nó cũng mang lại khả năng nâng cao luồng dữ liệu với phần mềm trung gian và phần mềm nâng cao lưu trữ.
RxJS là một bộ công cụ để lập trình phản ứng. Bạn thực sự có thể coi mọi thứ diễn ra trong ứng dụng của mình dưới dạng một luồng. RxJS cung cấp một bộ công cụ rất phong phú để quản lý các luồng đó.
RxJS và Redux chặn ở đâu? Trong redux, bạn cập nhật trạng thái của mình bằng các hành động và rõ ràng những hành động này có thể được coi là luồng. Sử dụng phần mềm trung gian như redux-Observable (bạn không cần phải làm như vậy), bạn có thể triển khai cái gọi là "logic nghiệp vụ" của mình theo cách phản ứng. Một điều khác là bạn có thể tạo một tệp có thể quan sát được từ cửa hàng redux của mình, điều này đôi khi có thể dễ dàng hơn so với việc sử dụng một trình tăng cường.
Nói một cách ngắn gọn:
Redux: Thư viện lấy cảm hứng từ Flux được sử dụng cho Quản lý Nhà nước .
RxJS: Nó là một thư viện Javascript khác dựa trên triết lý lập trình phản ứng, được sử dụng để xử lý "Luồng" (Observables, v.v.) [Đọc về Lập trình phản ứng để hiểu khái niệm Luồng].
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 mergevà sau đó scanxuất ra trạng thái. Giá trị mặc định được đặt startWithngay 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. combineLatestcó 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.
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á đó.