Dễ dàng lưu trữ trạng thái giao diện người dùng tạm thời trong Rails với Kredis

Kredis (Keyed Redis) là một bổ sung gần đây cho bộ công cụ của nhà phát triển Rails. Nó cố gắng đơn giản hóa việc lưu trữ và truy cập dữ liệu có cấu trúc trên Redis.

Trong phần đầu tiên của loạt bài gồm hai phần này, chúng ta sẽ bắt đầu bằng cách tìm hiểu cách hoạt động của Kredis. Sau đó, chúng ta sẽ xem xét một trường hợp sử dụng mẫu để lưu trữ trạng thái giao diện người dùng tạm thời bằng cách sử dụng khóa Redis riêng.

Hãy bắt đầu!

Giới thiệu về Kredis cho Rails

Kredis là Railtie cung cấp các trình bao bọc thuận tiện để hợp lý hóa việc sử dụng nó theo ba cách:

• API kiểu Ruby :Ví dụ:các loại bộ sưu tập như Kredis.list hoặc Kredis.set mô phỏng các loại Ruby gốc (và API tương ứng của chúng) càng nhiều càng tốt.
• Gõ chữ :Đặc biệt tiện dụng cho các bộ sưu tập, Kredis có thể xử lý việc truyền kiểu các phần tử từ/đến các kiểu dữ liệu tiêu chuẩn (ví dụ:datetime , json ).
• DSL ActiveRecord :Có lẽ là tài sản lớn nhất của thư viện, nó cho phép bạn dễ dàng kết nối bất kỳ cấu trúc dữ liệu Redis nào với một phiên bản mô hình cụ thể .

Đây là một ví dụ từ README:

Lợi ích chính của Kredis là sự dễ dàng mà nó mang lại để lưu trữ thông tin tạm thời liên quan đến một bản ghi nhất định, nhưng độc lập với phiên . Thông thường, khi cần lưu trữ dữ liệu trong Rails, bạn có một số tùy chọn — trong đó có hai tùy chọn phổ biến nhất là:

• Bản ghi hoạt động :Trong hầu hết các trường hợp, điều này yêu cầu thêm một cột hoặc vá mô hình dữ liệu của bạn. Cần phải di chuyển cùng với việc chèn lấp các bản ghi cũ theo tùy chọn.
• Phiên :Kho khóa/giá trị mặc định của mọi ứng dụng Rails và không yêu cầu hoặc ít thiết lập. Nhược điểm là dữ liệu được lưu trữ trong đó không tồn tại được sau chu kỳ đăng nhập/đăng xuất.

Kredis đưa ra lựa chọn thứ ba. Cần ít thiết lập, ngoài việc gọi DSL trong mô hình. Nhưng trừ khi phiên bản Redis của bạn ngừng hoạt động, dữ liệu của bạn sẽ được lưu trữ trên các phiên và thậm chí cả các thiết bị. Vì vậy, một trường hợp sử dụng tốt cho Kredis là thông tin không quan trọng mà bạn muốn chia sẻ xuyên biên giới thiết bị, ví dụ:trong ứng dụng web và ứng dụng di động đồng hành.

Nghiên cứu điển hình:Duy trì và khôi phục trạng thái giao diện người dùng được thu gọn/mở rộng bằng Kredis

Một ví dụ điển hình về trường hợp sử dụng tốt của Kredis là khi duy trì trạng thái giao diện người dùng, chẳng hạn như:

• Trạng thái đóng/mở thanh bên
• Trạng thái đóng/mở dạng cây
• Trạng thái thu gọn/mở rộng của Accordion
• Bố cục trang tổng quan tùy chỉnh
• Hiển thị bao nhiêu dòng của bảng dữ liệu

Để làm ví dụ, chúng ta sẽ xem xét cách quản lý trạng thái thu gọn/mở rộng của <details> phần tử.

Hãy bắt đầu với một ứng dụng Rails mới, thêm kredis vào gói và chạy trình cài đặt của nó:

Lưu ý: Điều này sẽ tạo tệp cấu hình Redis trong config/redis/shared.yml .

Trong phần còn lại của bài viết này, tôi sẽ giả định rằng bạn có một phiên bản Redis đang chạy cục bộ. Trên macOS với Homebrew, việc này dễ dàng như chạy:

Vui lòng tham khảo hướng dẫn "Bắt đầu" chính thức để biết thông tin về cách cài đặt Redis trên hệ điều hành của bạn.

Xác thực người dùng

Chúng ta sẽ sử dụng User mô hình làm thực thể để lưu trữ thông tin trạng thái giao diện người dùng. Để tránh việc đạp xe ở đây, chúng ta hãy sử dụng những gì Devise cung cấp sẵn:

Sau đó, chúng tôi tạo một người dùng mẫu trong bảng điều khiển Rails:

Ứng dụng mẫu của chúng tôi:Cửa hàng trực tuyến

Để minh họa cách Kredis có thể giúp duy trì trạng thái của cấu trúc cây phức tạp, hãy giả sử chúng ta đang điều hành một cửa hàng bách hóa trực tuyến. Để đạt được mục đích này, chúng tôi sẽ xây dựng Department và Product các mô hình. Chúng tôi bao gồm tính năng tự liên kết từ bộ phận này sang bộ phận khác để tạo cấu trúc lồng nhau hai cấp độ:

Tất nhiên, chúng ta phải cho phép cha mẹ null để cho phép các gốc cấu trúc cây của chúng ta:

Department của chúng tôi và Product mô hình được định nghĩa như sau:

Cuối cùng, chúng tôi sử dụng trình giả mạo để tạo một số dữ liệu gốc:

Giàn giáo mặt tiền cửa hàng

Chúng ta sẽ tạo một HomeController rất đơn giản nó sẽ hoạt động như mặt tiền cửa hàng của chúng tôi.

Chúng tôi thực hiện tự kết nối với các phòng ban con của các phòng ban để chỉ truy xuất những phòng ban thực sự có các phòng ban phụ (hay nói cách khác là gốc cây của chúng tôi):

Trong chế độ xem chỉ mục, chúng tôi thiết lập chế độ xem dạng cây lồng nhau bằng hai cấp độ <details> các yếu tố cho các phòng ban của chúng tôi:

Hiện tại, chúng tôi có chế độ xem dạng cây của các phòng ban với các tên sản phẩm có chủ ý ngớ ngẩn mà chúng tôi có thể khám phá bằng cách mở và đóng:

Chúng tôi muốn duy trì trạng thái tiết lộ của từng danh mục riêng lẻ mà chúng tôi sẽ hướng tới tiếp theo.

Trạng thái danh mục giao diện người dùng ổn định trong Kredis

Đây là những gì chúng ta sẽ làm, từng bước một:

1. Thêm kredis_set được gọi là open_department_ids tới User mô hình. Lý do chúng tôi sử dụng một bộ ở đây là vì nó không cho phép trùng lặp, vì vậy chúng tôi có thể thêm và xóa các phòng ban của mình một cách an toàn.

2. Tạo một UIStateController sẽ nhận được các thông số sau:

   • department_id
   • open tình trạng của bộ phận đó

   Sau đó nó sẽ thêm hoặc bớt bộ phận này vào kredis_set dành cho người dùng hiện đang đăng nhập.

3. Tạo Bộ điều khiển kích thích sẽ lắng nghe sự kiện chuyển đổi trên phần tử chi tiết và gửi tải trọng tương ứng.

Hãy bắt tay vào thực hiện thôi!

Thêm cấu trúc dữ liệu Kredis đã nói vào User mô hình dễ dàng như gọi kredis_set và chuyển một mã định danh:

Tiếp theo, chúng tôi tạo UIStateController để nhận các bản cập nhật trạng thái giao diện người dùng. Lưu ý rằng chúng ta phải định cấu hình tuyến đường được tạo thành patch điểm cuối:

Lần gặp đầu tiên của chúng tôi với API của Kredis là trong bộ điều khiển. Chúng ta có thể thấy rằng nó cố gắng đáp ứng mong đợi của các nhà phát triển Ruby một cách chặt chẽ nhất có thể, vì vậy bạn có thể thêm vào bộ này bằng cách sử dụng << và xóa bằng remove .

Điều đang xảy ra ở đây là chúng tôi chuyển đổi sự hiện diện của một department_id cụ thể trong bộ dựa trên open param đang được bàn giao từ khách hàng. Để hoàn thiện bức tranh, chúng ta phải viết một số mã phía máy khách để truyền những thay đổi trạng thái giao diện người dùng này.

Chúng ta sẽ sử dụng @rails/request.js để thực hiện các hành động nên chúng ta phải ghim nó:

Trong bộ điều khiển Kích thích mới mà chúng tôi sẽ gắn vào một <details> cụ thể phần tử, chúng tôi nối thêm ID phòng ban và open của nó trạng thái thành FormData đối tượng và gửi nó:

Chúng tôi chỉnh sửa mã xem của mình theo đề xuất và lắng nghe toggle sự kiện của mỗi <details> phần tử để kích hoạt cập nhật trạng thái giao diện người dùng:

Bù nước cho DOM theo cách thủ công

Thành phần duy nhất còn thiếu để hoàn thiện vòng tròn là bù nước DOM của chúng tôi về trạng thái mong muốn sau khi người dùng làm mới trang. Chúng tôi thực hiện việc này một cách thủ công bằng cách thêm open thuộc tính cho <details> nút (nếu ID bộ phận của nó có trong bộ Kredis):

Cuối cùng, đây là kết quả. Lưu ý rằng trạng thái mở/đóng của từng nút cây được bảo toàn theo 2 cấp độ:

Tiếp theo:Vùng chứa cục bộ người dùng tổng quát cho trạng thái giao diện người dùng

Trong phần đầu tiên của loạt bài gồm hai phần này, chúng tôi đã giới thiệu Kredis và khám phá cách duy trì cũng như khôi phục trạng thái giao diện người dùng bị thu gọn/mở rộng bằng Kredis.

Chúng tôi đã sử dụng ví dụ về một cửa hàng bách hóa trực tuyến để nêu bật cách Kredis có thể duy trì trạng thái của cấu trúc cây phức tạp, trước khi bù nước cho DOM theo cách thủ công.

Tuy nhiên, điều này không có nghĩa là chúng ta phải phát minh ra rất nhiều khóa Kredis. Lần tới, chúng ta sẽ tìm hiểu cách giải quyết vấn đề này bằng vùng chứa cục bộ người dùng tổng quát cho trạng thái giao diện người dùng.

Cho đến lúc đó, chúc bạn viết mã vui vẻ!

Tái bút. Nếu bạn muốn đọc các bài đăng của Ruby Magic ngay khi chúng được đăng tải, hãy đăng ký nhận bản tin Ruby Magic của chúng tôi và không bao giờ bỏ lỡ một bài đăng nào!