선택기와 함께 RTK 쿼리를 사용하는 방법
P粉729198207
P粉729198207 2023-12-28 11:46:38
0
1
685

저는 Redux ToolkitRTK Query를 사용하여 프로젝트를 구축하고 API에서 일부 항목을 가져오려고 합니다. 저는 createEntityAdapter의 데이터 정규화 방법을 사용하고 있습니다. 특정 구성 요소에서 데이터가 배열로 필요하기 때문에 결국 선택기를 사용하게 되었습니다. 이제 문제는 필터를 쿼리의 매개변수로 추가했기 때문에 선택기가 작동을 멈췄다는 것입니다.

여기에서 "RTK 쿼리 선택기를 매개변수와 함께 사용하는 방법"과 같은 비슷한 질문을 살펴봤지만 너무 멍청해서 수정해야 할 부분을 이해하지 못했습니다. RTK 쿼리 문서를 이해하려고 노력하고 있지만 이해할 수 없습니다.

위의 질문에서 무엇을 선택할지 정확히 알기 위해서는 내 선택자에도 매개변수가 있어야 한다는 점과 이는 권장되는 패턴이 아니라는 점을 알지만 어떻게 작동하게 만드는지 이해할 수 없습니다.

내 항목 슬라이스:

으아악

저는 이렇게 Entries 컴포넌트에 사용합니다

으아악

참고: get 쿼리에서 "필터"를 제거하면 모든 것이 이전처럼 작동합니다(물론 예상대로).

면책조항: 제가 지금 무엇을 하고 있는지 전혀 모르겠습니다. 문서를 읽고 알아내려고 노력 중이므로 피드백을 주시면 매우 감사하겠습니다. 감사해요!

P粉729198207
P粉729198207

모든 응답(1)
P粉779565855

예, RTKQ 문서는 가장 간단한 예, 즉 매개 변수를 전혀 사용하지 않는 쿼리를 보여주는 경향이 있으므로 이는 다소 민감한 주제입니다. 나 자신도 많은 문제를 겪었습니다.

어쨌든 selectEntryResult을 두 매개변수(state 및 params)의 함수로 선언했습니다. 그런 다음 그 아래에 어댑터 선택기를 만들 때 하나의 매개변수인 상태만 사용하여 이를 호출합니다. 또한 구성 요소에서 최종 선택기를 다음과 같이 사용할 때:

으아악

매개변수는 찾을 수 없으며 기본적으로 未定义 해당 쿼리 매개변수와 관련된 데이터는 찾을 수 없습니다.

여기서 이해해야 할 중요한 점은 실제로 어떻게든 선택기(각 래퍼)의 각 수준을 통해 쿼리 매개변수를 전달해야 한다는 것입니다.

한 가지 방법은 선택기를 통해 매개변수를 "전달"하는 것입니다.

으아악

여기에서는 RTK에서 내보낸 createSelector 기능을 사용합니다. 그런 다음 구성 요소에서 다음과 같은 작업을 수행합니다.

으아악

이것은 엔터티 어댑터를 사용하여 생성됩니다. selectAll 选择器时有效,但在使用 selectById 时会导致问题,因为该选择器也是参数化的。简而言之,selectById 선택기는 검색하려는 엔터티 ID의 두 번째 인수를 사용하도록 내부적으로 정의된 반면, 제가 보여드린 방법은 두 번째 인수를 사용하여 쿼리 매개변수(장치의 필터)를 전달합니다. 사례).

내가 아는 한, 완벽하게 작동하고 다음을 모두 포괄하는 솔루션은 아직 없습니다.

  • 엔티티 정규화 사용
  • 선택기를 사용하여 데이터 검색
  • 매개변수화된 쿼리 사용

또 다른 접근 방식은 쿼리 매개변수의 특정 조합에 대한 기본 선택기를 동적으로 생성하는 일부 선택기 팩토리를 만드는 것일 수 있습니다.

어떤 상황에서도 사용할 수 있는 이런 포장지를 만들어본 적이 있어요. 불행히도 비공개 패키지이기 때문에 공유할 수는 없지만 기본 아이디어는 쿼리 매개변수를 선택기에 세 번째 인수로 전달하여 selectByIdselectAll(및 다른 모든 선택기)가 제대로 작동하도록 매개변수를 변경한 다음 추가로 변경하는 것입니다. 각 엔터티 어댑터 선택기를 다시 래핑합니다.

으아악

이게 복잡하게 들리고 간신히 작동하게 했으니 이 방향으로 가지 않도록 하세요 :)

길에서 찾은 유용한 기사는 여기에서 찾을 수 있습니다. 이 기사에는 구성 요소 수준에서 선택기를 만들고 기억하는 몇 가지 방법도 설명되어 있지만 아직 모두 시도하지는 않았습니다. 한 번 보세요. 특정 문제를 해결하는 더 쉬운 방법을 찾을 수 있을 것입니다.

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿