Angular 6 - Tại sao nên sử dụng @ ngrx / store thay vì sử dụng dịch vụ


84

Gần đây tôi đang học Angular 6 với @ ngrx / store trong khi một trong những hướng dẫn là sử dụng @ ngrx / store để quản lý nhà nước, tuy nhiên tôi không hiểu lợi ích của việc sử dụng @ ngrx / store đằng sau hậu trường.

Ví dụ: đối với một hành động đăng nhập và đăng ký đơn giản, trước đây bằng cách sử dụng dịch vụ (Hãy gọi nó là AuthService), chúng tôi có thể sử dụng nó để gọi api phụ trợ, lưu trữ "userInfo" hoặc "mã thông báo" trong AuthService, chuyển hướng người dùng đến "HOME" và chúng ta có thể đưa AuthService vào bất kỳ thành phần nào mà chúng ta cần lấy userInfo bằng cách sử dụng DI, đơn giản là một tệp AuthService xử lý mọi thứ .

Bây giờ nếu chúng ta đang sử dụng @ ngrx / store, chúng ta cần xác định Action / State / Reducer / Effects / Selector có thể cần viết trong 4 hoặc 5 tệp để xử lý hành động hoặc sự kiện ở trên, sau đó đôi khi chúng ta vẫn cần gọi phụ trợ api sử dụng dịch vụ, có vẻ phức tạp và dư thừa hơn nhiều ...

Trong một số trường hợp khác, tôi thậm chí còn thấy một số trang sử dụng @ ngrx / store để lưu trữ đối tượng hoặc danh sách đối tượng như dữ liệu lưới. , đó có phải là cách sử dụng lưu trữ trong bộ nhớ không?

Vì vậy, quay lại câu hỏi, tại sao chúng ta sử dụng @ ngrx / store thay vì cửa hàng đăng ký dịch vụ ở đây trong dự án Angular? Tôi biết đó là cách sử dụng " QUẢN LÝ NHÀ NƯỚC ", nhưng chính xác thì "QUẢN LÝ NHÀ NƯỚC" là gì? Đó có phải là thứ giống như nhật ký giao dịch và Khi nào chúng ta cần nó? Tại sao chúng tôi quản lý nó trên giao diện người dùng? Vui lòng chia sẻ đề xuất hoặc kinh nghiệm của bạn trong khu vực @ ngrx / store!


7
Năm ngoái, tôi đã bắt đầu một công việc mới trong một công ty. Họ đang sử dụng Angular với Redux. Tôi chưa chạm vào Redux, nhưng tôi đã phát triển trong Angular kể từ khi nó phát hành bản beta. Ấn tượng đầu tiên của tôi là cái quái gì thế này? Quá nhiều phức tạp chỉ để giao tiếp với API và đăng ký dữ liệu đó. Họ thực sự đã sử dụng Redux cho mọi thứ! Đó là một mớ hỗn độn đến mức không thể làm việc được. Thực sự không cần phải tích hợp Redux / Ngrx vào một ứng dụng Angular. Bạn có thể làm mọi thứ theo 'Angular way'
Dino

3
NgRx làm tăng độ phức tạp của mã theo cấp số nhân với rất nhiều mã soạn sẵn không cần thiết. Mặt khác, nó hầu như không cung cấp bất cứ điều gì ngoài những gì Angular, với tư cách là một khung hoàn chỉnh, đã cung cấp sẵn. Bài đăng trên blog này bao gồm tất cả thông tin bạn cần: Quản lý trạng thái ứng dụng Angular: Bạn không cần (Không) cần lưu trữ dữ liệu bên ngoài
seidme

Câu trả lời:


35

Tôi nghĩ bạn nên đọc hai bài đăng đó về cửa hàng Ngrx:

Nếu câu đầu tiên giải thích các vấn đề chính được giải quyết bởi Ngrx Store, nó cũng trích dẫn câu này từ React How-To "dường như áp dụng tương tự cho Flux, Redux, Ngrx Store gốc hoặc bất kỳ giải pháp store nào nói chung":

Bạn sẽ biết khi nào bạn cần Flux. Nếu bạn không chắc chắn nếu bạn cần nó, bạn không cần nó.

Đối với tôi, cửa hàng Ngrx giải quyết nhiều vấn đề. Ví dụ: khi bạn phải xử lý các dữ liệu có thể quan sát và khi khả năng đáp ứng đối với một số dữ liệu có thể quan sát được chia sẻ giữa các thành phần khác nhau. Trong trường hợp này, các hành động lưu trữ và trình giảm thiểu đảm bảo rằng các sửa đổi dữ liệu sẽ luôn được thực hiện "đúng cách".

Nó cũng cung cấp một giải pháp đáng tin cậy để lưu vào bộ nhớ đệm các yêu cầu http. Bạn sẽ có thể lưu trữ các yêu cầu và phản hồi của chúng, để bạn có thể xác minh rằng yêu cầu bạn đang thực hiện chưa phải là phản hồi được lưu trữ.

Bài đăng thứ hai nói về điều gì đã khiến các giải pháp như vậy xuất hiện trong thế giới React với sự cố bộ đếm tin nhắn chưa đọc của Facebook.

Liên quan đến giải pháp lưu trữ dữ liệu không thể phục hồi của bạn trong các dịch vụ. Nó hoạt động tốt khi bạn đang xử lý dữ liệu liên tục. Nhưng khi một số thành phần sẽ phải cập nhật dữ liệu này, bạn có thể sẽ gặp phải sự cố phát hiện thay đổi và sự cố cập nhật không đúng cách mà bạn có thể giải quyết bằng:

  • mẫu người quan sát với Đối tượng riêng tư công cộng Có thể quan sát và chức năng tiếp theo
  • Cửa hàng Ngrx

9

Ngoài ra còn có một tùy chọn thứ 3, chẳng hạn như có dữ liệu trong dịch vụ và sử dụng dịch vụ trực tiếp trong html *ngFor="let item of userService.users". Vì vậy, khi bạn cập nhật userService.userstrong dịch vụ sau khi hành động thêm hoặc cập nhật được tự động hiển thị trong html, không cần bất kỳ khả năng quan sát hoặc sự kiện hoặc lưu trữ nào.


4
Nó không hoạt động trong AOT nếu dịch vụ được đưa vào là dịch vụ riêng tư. Cách tốt nhất là không để dịch vụ hiển thị với mẫu của thành phần. Thay vào đó, hãy giữ một biến trong thành phần và lấy / đặt nó dựa trên biến của dịch vụ.
Srichandradeep C

2

Nếu dữ liệu trong ứng dụng của bạn được sử dụng trong nhiều thành phần, thì cần phải có một số loại dịch vụ để chia sẻ dữ liệu. Có rất nhiều cách để làm điều này.

Một ứng dụng phức tạp vừa phải cuối cùng sẽ trông giống như một cấu trúc giao diện người dùng, với việc xử lý dữ liệu được thực hiện trong các dịch vụ, hiển thị dữ liệu qua các thành phần có thể quan sát được.

Tại một thời điểm, bạn sẽ cần viết một số loại api cho các dịch vụ dữ liệu của mình, cách lấy và nhập dữ liệu, truy vấn, v.v. Rất nhiều quy tắc như tính bất biến của dữ liệu và các đường dẫn đơn được xác định rõ ràng để sửa đổi dữ liệu. Không giống như phần phụ trợ của máy chủ, nhưng nhanh hơn và phản hồi nhanh hơn nhiều so với các cuộc gọi api.

Api của bạn sẽ trông giống như một trong nhiều thư viện quản lý nhà nước đã tồn tại. Chúng tồn tại để giải quyết những vấn đề khó khăn. Bạn có thể không cần chúng nếu ứng dụng của bạn đơn giản.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.