반응 + redux에서 환원제에 대한 좋은 전략?

Question

예를 들어 https://github.com/reactjs/redux/tree/master/examples/real-world에 표시된 것과 비슷하게 React + Redux를 사용하여 API와 이야기하고있는 웹 애플리케이션을 빌드하고 있습니다.

내 API는 아티스트, 앨범 및 트랙 목록을 반환하고 해당 아티스트, 앨범 또는 트랙 목록을 쿼리 할 수 ​​있습니다. (/ album/: id,/artist/: id 및/tracks/: id가 추가 된/앨범,/아티스트 및/트랙으로 생각하십시오.)

API 미들웨어를 구현하고 위의 예에서 paginate 감속기를 사용하여 앨범, 아티스트 및 노래 검색을위한 페이지 번호가 지정된 키가있는 저장소를 얻습니다.

이제 단일 객체를 가져 와서 표시하기 위해 단일 호출을 구현하고 싶습니다. 하지만 내 감속기를 다루는 올바른 방법에 대해서는 확신 할 수 없습니다. 여분의 축소 기가있는 combineReducersartist, album 및 track을 관리하고 저장해야합니까?

내가 감속비 관리와 관련된 또 다른 질문은 현재 설정으로 3 개의 paginate 감속기를 보관하고 있으며 각 30 개의 항목이 들어 있습니다. 즉, 나는 거의 100 개의 아이템을 내 가게에 가지고 있는데, 동시에 30 개 아이템이 동시에 표시되는데, 이는 매우 효율적이지 않은 것으로 보인다. 내가 제대로하고 있니?

난 뒤에 아주 큰 API와 실제 오픈 소스 예제를 보였지만, 좀 더 위의 실제 예를보다 정교 예 건너 없습니다 :/

감사합니다!

Answer 1

분명히 React에는 하나의 규칙이 모두 들어 맞지 않습니다.

그러나 GitHub에서 대부분의 상용어와 반응 웹 응용 프로그램에서 주목할만한 점은 일반적으로 감속기가 각 컨테이너에 대해 생성된다는 것입니다.

귀하의 아티스트, 앨범 및 트랙에 대한 축소기를 만드는 것이 좋습니다. 그런 다음 combineReducer를 사용하여 하나의 rootReducer에 결합 할 수 있습니다. 여기에 예제가 있습니다.

import { combineReducers } from 'redux'; 
import artists from './artistsReducer'; 
import albums from './albumsReducer'; 
import tracks from './tracksReducer'; 

const rootReducer = combineReducers({ 
    artists, 
    albums, 
    tracks 
}); 

export default rootReducer; 

이 정보는 다시 self-experience 및 repos-respondx를 사용하여 보게됩니다. 내가 틀렸다면 나를 교정 해주십시오.

최고 감사합니다,

Answer 2

내가 매우 도메인 객체 유형으로, 분단 상태를 유지 시작했습니다 - 아티스트 앨범과 트랙 (뿐만 아니라 "오버레이", "오류 메시지"를 물건처럼 같은 일부 사용자 인터페이스 상태 있도록 그). 그런 다음 현재 상태를 가져 와서 React 구성 요소에서 사용할 수있는 항목으로 처리하는 일부 재검색 클래스가 있습니다.

데이터 변환 (별도로 테스트 할 수 있음)과 별도로 간단한 데이터 저장소 (원하는 단위 테스트 프레임 워크로 테스트 가능)를 제공합니다.

좋은 선택은 좋은 데이터 변환 파이프 라인을 제공하고 결과를 캐시하므로 항상 데이터 변환을 다시 계산할 필요가 없다는 것입니다. 즉, React 컴포넌트는 다시 렌더링 할 필요가 없을 때 더 좋을 수 있습니다.

아, 그리고 서버의 캐시 된 데이터를 많이 저장하는 것의 효율성 측면에서. 내 전략은 적극적으로 캐시하는 것입니다. 따라서 캐시에서 내용을 지우지는 않습니다.그러나 나는 redux 모델을 모니터하고 상태 변경 (예 : 미리로드되는 데이터)에 따라 이벤트를 트리거하는 "컨트롤러"라는 별개의 객체를 가지고 있습니다. 이것은 성능 문제가 된 경우 캐시 무효화 코드를 넣을 곳입니다. 또는 감속기에 캐시 무효화를 수행 할 수 있습니다.