Kredis를 사용하여 Rails에 임시 UI 상태를 손쉽게 저장

Kredis(Keyed Redis)는 최근 Rails 개발자 툴킷에 추가되었습니다. Redis에서 구조화된 데이터의 저장과 액세스를 단순화하기 위해 노력하고 있습니다.

두 부분으로 구성된 시리즈 중 첫 번째 부분에서는 Kredis의 작동 방식부터 살펴보겠습니다. 그런 다음 맞춤형 Redis 키를 사용하여 임시 UI 상태를 저장하는 사용 사례 예시를 살펴보겠습니다.

시작해 보세요!

Rails용 Kredis 소개

Kredis는 세 가지 방법으로 사용을 간소화할 수 있는 편리한 래퍼를 제공하는 Railtie입니다:

• Ruby와 유사한 API :예를 들어 Kredis.list과 같은 컬렉션 유형 또는 Kredis.set 가능한 한 네이티브 Ruby 유형(및 해당 API)을 에뮬레이션하세요.
• 입력 :특히 컬렉션에 편리하며 Kredis는 표준 데이터 유형(예:datetime)에서 요소를 유형 캐스팅하는 작업을 처리할 수 있습니다. , json ).
• 액티브레코드 DSL :아마도 라이브러리의 가장 큰 자산일 것입니다. 이를 통해 모든 Redis 데이터 구조를 특정 모델 인스턴스와 쉽게 연결할 수 있습니다. .

다음은 README의 예입니다:

Kredis의 주요 이점은 특정 레코드와 관련된 임시 정보를 세션과 독립적으로 쉽게 저장할 수 있다는 점입니다. . 일반적으로 Rails에 데이터를 유지해야 하는 경우 몇 가지 옵션이 있으며 그 중 가장 일반적인 두 가지 옵션은 다음과 같습니다.

• 액티브레코드 :대부분의 경우 열을 추가하거나 데이터 모델을 패치해야 합니다. 마이그레이션이 필요하며 선택적으로 기존 기록을 다시 채울 수도 있습니다.
• 세션 :모든 Rails 앱의 기본 키/값 저장소이며 설정이 전혀 또는 거의 필요하지 않습니다. 단점은 여기에 저장된 데이터가 로그인/로그아웃 주기 이후에도 유지되지 않는다는 것입니다.

Kredis는 세 번째 옵션을 테이블에 제시합니다. 모델에서 DSL을 호출하는 것 외에는 설정이 거의 필요하지 않습니다. 그러나 Redis 인스턴스가 다운되지 않는 한 데이터는 세션은 물론 장치에도 저장됩니다. 따라서 Kredis의 좋은 사용 사례는 웹 앱과 컴패니언 모바일 앱 등 기기 경계를 넘어 공유하려는 중요하지 않은 정보입니다.

사례 연구:Kredis를 사용하여 접힌/확장된 UI 상태 유지 및 복원

Kredis의 좋은 사용 사례의 일반적인 사례는 다음과 같은 UI 상태를 유지하는 경우입니다.

• 사이드바 열기/닫기 상태
• 트리뷰 열기/닫기 상태
• 아코디언 접힘/확장 상태
• 맞춤 대시보드 레이아웃
• 표시할 데이터 테이블의 행 수

예시로 <details>의 접힌/펼친 상태를 관리하는 방법을 살펴보겠습니다. 요소입니다.

새로운 Rails 앱으로 시작해 보겠습니다. kredis을 추가하세요. 번들에 추가하고 설치 프로그램을 실행합니다:

참고: 그러면 config/redis/shared.yml에 Redis 구성 파일이 생성됩니다. .

이 기사의 나머지 부분에서는 로컬에서 실행되는 Redis 인스턴스가 있다고 가정합니다. Homebrew를 사용하는 macOS에서는 다음을 실행하는 것만큼 쉽습니다.

운영 체제에 Redis를 설치하는 방법에 대한 자세한 내용은 공식 "시작하기" 가이드를 참조하세요.

사용자 인증

우리는 User을 사용할 것입니다. UI 상태 정보를 저장하는 엔터티로 모델을 지정합니다. 여기에서 자전거 타기를 방지하려면 Devise가 기본적으로 제공하는 기능을 사용해 보겠습니다.

그런 다음 Rails 콘솔에서 예시 사용자를 생성합니다:

예제 앱:온라인 상점

Kredis가 복잡한 트리 구조의 상태를 유지하는 데 어떻게 도움이 되는지 설명하기 위해 온라인 백화점을 운영한다고 가정해 보겠습니다. 이를 위해 우리는 Department을 발판으로 삼을 것입니다. 및 Product 모델. 두 가지 수준의 중첩 구조를 만들기 위해 부서 간 자체 조인을 포함합니다.

물론 트리 구조 루트를 허용하려면 null 상위 항목을 허용해야 합니다.

우리의 Department 및 Product 모델은 다음과 같이 정의됩니다:

마지막으로 우리는 faker를 사용하여 시드 데이터를 생성합니다:

상점 비계

우리는 매우 간단한 HomeController을 생성하겠습니다. 그것은 우리 가게의 매장 역할을 할 것입니다.

실제로 하위 부서가 있는 부서(또는 트리의 루트)만 검색하기 위해 부서의 하위 항목에 대해 자체 조인을 수행합니다.

인덱스 보기에서는 <details>의 두 가지 수준을 사용하여 중첩된 트리 보기를 설정합니다. 우리 부서의 요소:

현재 우리는 열거나 닫아서 탐색할 수 있는 의도적으로 어리석은 제품 이름을 가진 부서의 트리 보기를 가지고 있습니다.

우리는 개별 카테고리의 공개 상태를 유지하려고 하며 다음 단계로 넘어갈 예정입니다.

Kredis에서 카테고리의 UI 상태 유지

단계별로 우리가 할 일은 다음과 같습니다.

1. kredis_set 추가 open_department_ids이라고 합니다 User로 모델. 여기서 세트를 사용하는 이유는 중복이 허용되지 않아 안전하게 부서를 추가하고 제거할 수 있기 때문입니다.

2. UIStateController 만들기 다음 매개변수를 받게 됩니다:

   • department_id
   • open 해당 부서의 상태

   그런 다음 이 부서를 kredis_set에 추가하거나 제거합니다. 현재 로그인된 사용자에 대해.

3. 자극 컨트롤러 만들기 세부정보 요소의 토글 이벤트를 수신하고 해당 페이로드를 전송합니다.

시작해 보겠습니다!

해당 Kredis 데이터 구조를 User에 추가 모델은 kredis_set을 호출하는 것만큼 쉽습니다 식별자를 전달합니다:

다음으로 UIStateController를 생성합니다. UI 상태 업데이트를 수신합니다. 생성된 경로를 patch로 구성해야 합니다. 끝점:

Kredis의 API를 처음 접하는 곳은 컨트롤러입니다. Ruby 개발자의 기대에 최대한 부합하려고 노력하는 것을 볼 수 있으므로 <<를 사용하여 세트에 추가할 수 있습니다. , remove를 사용하여 삭제 .

여기서 일어나는 일은 특정 department_id의 존재를 전환하는 것입니다. open를 기반으로 한 세트 클라이언트로부터 param이 전달됩니다. 그림을 완성하려면 이러한 UI 상태 변경 사항을 전송하는 클라이언트 측 코드를 작성해야 합니다.

@rails/request.js을 사용하겠습니다. 작업을 수행하려면 고정해야 합니다.

특정 <details>에 연결할 새로운 Stimulus 컨트롤러 요소에는 부서 ID와 해당 open를 추가합니다. FormData에 상태를 표시합니다. 이의를 제기하고 제출하세요.

제안된 대로 뷰 코드를 편집하고 toggle를 수신합니다. 각 <details>의 이벤트 UI 상태 업데이트를 트리거하는 요소:

DOM을 수동으로 재수화

완전한 순환을 이루기 위해 누락된 유일한 구성 요소는 수분 공급입니다. 사용자가 페이지를 새로 고치면 DOM이 원하는 상태로 변경됩니다. open를 추가하여 이 작업을 수동으로 수행합니다. <details>에 대한 속성 노드(해당 부서 ID가 Kredis 세트에 있는 경우):

마지막으로 결과는 다음과 같습니다. 개별 트리 노드의 열림/닫힘 상태는 2개 수준에 걸쳐 유지됩니다:

다음:UI 상태에 대한 일반화된 사용자 로컬 컨테이너

두 부분으로 구성된 이 시리즈의 첫 번째 부분에서는 Kredis를 소개하고 Kredis를 사용하여 접힌/확장된 UI 상태를 유지하고 복원하는 방법을 살펴보았습니다.

우리는 온라인 백화점의 예를 사용하여 Kredis가 DOM을 수동으로 복원하기 전에 어떻게 복잡한 트리 구조의 상태를 유지할 수 있는지 강조했습니다.

그러나 이는 우리가 많은 Kredis 키를 발명해야 함을 의미합니다. 다음번에는 UI 상태에 대한 일반화된 사용자 로컬 컨테이너를 사용하여 이 문제를 해결할 수 있는 방법에 대해 자세히 알아보겠습니다.

그때까지 즐거운 코딩 되세요!

추신 Ruby Magic 게시물이 보도되는 즉시 읽으려면 Ruby Magic 뉴스레터를 구독하고 단 하나의 게시물도 놓치지 마세요!