React?가있는 여러 렌더링 변형

Question

React를 사용하여 웹 응용 프로그램을 만들었습니다.이 응용 프로그램은 정상적으로 실행되고 잘 작동합니다. 아마도 혼자만 남겨 두어야 할 것입니다. 그러나 저를 괴롭히는 한 가지 영역이 있습니다. 리팩토링을해야 할 필요가 있다고 생각하는 이유는 내가하는 일이 내가 React의 흐름으로 나서는 것처럼 보이지 않기 때문입니다. 다른 사람들의 견해에 관심이 있습니다.

나는 페이지에서 제품을 추적하는 데 사용하는 React 클래스 인 Product가 있습니다. 상태에 저장된 유일한 속성은 '수량'입니다. 그러나 바/하위를 사용하여 바구니를 업데이트하는 등의 다양한 기능을 제공합니다. 이 제품 클래스가 사용되는 방법 및 위치 (테이블 또는 모바일 또는 데스크톱의 상세 뷰)에 따라 필요한 디스플레이가 상당히 다릅니다. 그래서 내 렌더링 함수에서 'renderForDetailOnMobile', 'renderForTableOnMobile', 'renderForDetailOnDesktop'및 'renderForTableOnDesktop'등 다양하게 호출합니다.

내가 말했듯이,이 모든 것이 거꾸로되어있는 것처럼 느껴지지 않습니다. (앱의 나머지 부분은 내가 훨씬 더 관용적이라고 말합니다). 그렇다면 이것을 어떻게 나누어서 더 작은 클래스들로 나누는 것이 좋을까요? 제가해야 할 일이 무엇인지 생각해보십시오. 죄송합니다. 개인 정보 보호를 위해 실제 코드를 작성할 수는 없으므로이 설명을 통해 상황을 명확하게 이해하시기 바랍니다.

Answer 1

플럭스 (flux) 또는 리덕스 (redux) 적용 여부에 따라 리듀서 또는 점포를 사용해야합니다. 이것은 당신이 당신의 상태와 그것이 어떻게 변화 하는지를 이해하는 데 도움이 될 것입니다.

위에서 언급 한 매장을 사용해야하는 동안 Product에 주를 사용하고 있습니다.

그래서 문제는 데이터 소스가 있고 기기 요구 사항에 따라 변환해야한다는 것입니다.

그런 경우에는 다른 장치에 대한 데이터 변환 및 표시를 담당하는 다른 구성 요소를로드하는 컨테이너를 만들 것입니다. 컨테이너는 조건부를 기준으로 올바른 구성 요소를 반환하기보다는 오히려 간단해야합니다.