앱을 손상시키지 않고 Redux Store에서 코드 몇 개를 Just로 대체한 방법!

Redux 스토어를 사용하는 개발자들 사이에서 공통적인 패턴을 관찰했습니다. 새롭지만 약간 다른 요구 사항에 직면할 때 종종 새로운 기능을 만들고 일반 상용구 코드를 다시 작성합니다. 리듀서, 썽크, 액션, 미들웨어를 포함합니다. 이로 인해 코드베이스 전반에 걸쳐 상당한 반복이 발생할 수 있습니다.

표준화와 팀 모범 사례는 일반적으로 팀 리더가 담당하므로 이에 대해 전적으로 개발자를 비난할 수는 없습니다....

그러나 삭제, 생성, 넣기, 가져오기와 같은 엔드포인트가 예측 가능한 구조를 따르는 API 또는 마이크로서비스가 표준화되면 Redux 리듀서 및 작업을 동적으로 생성할 수 있는 고차 함수를 생성하는 것이 가능합니다. 이는 중복성을 줄이고 보다 확장 가능한 아키텍처를 장려합니다. 이를 구현하는 방법의 예는 다음과 같습니다.

https://gist.github.com/ARAldhafeeri/1ad10710bee110b9a88013984272fbbd

200줄의 코드로, 그 용도는 다음과 같습니다.

1. 동적 Redux 슬라이스 생성: createEntitySlice 함수는 엔터티(예: 예약 또는 사용자)에 대한 Redux 슬라이스를 생성하여 개발자가 최소한의 상용구 코드로 모든 엔터티에 대한 데이터를 쉽게 생성, 읽기, 업데이트 및 삭제할 수 있도록 합니다.
2. 사용자 정의 가능한 매개변수: 이 함수는 엔터티 이름, 엔드포인트, extraReducers, extraThunks 및 extraActions와 같은 사용자 정의 가능한 매개 변수를 허용하여 다양한 엔터티 및 특정 요구 사항에 대한 유연성을 제공합니다.
3. 기본 CRUD 썽크: 제공된 엔드포인트를 기반으로 API와 상호 작용하는 가져오기, 생성, 업데이트, 삭제, 검색과 같은 일반적인 작업에 대한 기본 비동기 썽크를 제공합니다. 이러한 썽크는 필요한 API 호출을 관리하고 오류를 처리합니다.
4. 상태 관리용 감속기: 슬라이스에는 로드 상태 관리, 가져온 데이터 저장, 오류 처리, 상태 검색 및 재설정과 같은 작업 수행을 위한 감속기가 포함되어 있습니다.
5. 미들웨어 통합: 코드는 리스너 미들웨어를 통합하여 CRUD 작업 결과에 따라 성공 또는 오류 메시지 표시와 같은 부작용을 처리합니다. 또한 특정 조건이 충족될 때 추가 작업을 트리거하는 등 상태 변경 동작을 사용자 정의하는 기능을 통해 미들웨어를 향상시킵니다.
6. 최적화된 코드 재사용성: 개발자는 이 고차 함수 접근 방식을 사용하여 반복적인 상용구 코드를 피하고 매번 작업과 리듀서를 수동으로 작성하지 않고도 다양한 엔터티에 대해 재사용 가능한 동적 슬라이스를 생성할 수 있습니다.
7. 확장 가능 및 모듈식: 고차 함수는 기능에 대해 redux 저장소에서 필요한 기능을 생성하며, 리듀서에서 초기 상태까지 모든 것을 확장할 수 있으므로 사용자 정의 엔드포인트가 도착하면 그렇지 않습니다. 우리가 만든 일반 기반에 전체 내용을 추가하면 간단히 추가할 수 있습니다.

최고입니다.

아메드,

위 내용은 앱을 손상시키지 않고 Redux Store에서 코드 몇 개를 Just로 대체한 방법!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!