2016-07-05 1 views
2

나는 Redux를 중심으로 내 머리를 감싸고 React Native 앱에 구현하는 법을 배우고있다.도메인 이후 또는 앱보기 후에 Redux 저장소를 구성해야합니까?

나는 일반적인 생각을 갖고 있으며 나는 그것을 좋아한다. 그러나 나는 내 가게를 어떻게 구성해야할지 잘 모르겠습니다. 앱에서 두 가지 장면을 예로 들어 보겠습니다.

ProjectListScreen : 리스트 뷰 구성 요소로 구축 프로젝트의 목록입니다. 각 행은 각 프로젝트 객체에서 약 5 개의 필드를 노출합니다.

ProjectScreen : 특정 프로젝트에 대한 모든 필드를 보여주는 있는 ScrollView. 프로젝트 객체는 꽤 크고 완전히 평평하지 않을 수 있습니다. 예를 들어 이미지를 가리키는 UUID 배열을 보유하고 있습니다. 그래서

, 나는 완전한 "프로젝트"를 처리 할 수있는 하나의 감속기가 있어야 아니면 ProjectList에 대해 하나의 감속기가 있어야 및 프로젝트에 대한 하나? 나는. 실제 도메인이나 앱의 화면/화면면에서 생각해야 할 사항은 무엇입니까?

나는 그 대답이 도메인을 모방하는 것으로 의심된다. 그러나 목록에 1000 개의 프로젝트가 있다면 어떻게 될까요? 각 프로젝트의 모든 필드를 포함하여 1000 개의 프로젝트를 상점에로드해야합니다. 그러나 ListView를 렌더링하는 데 필요한 필드는 다섯 개뿐입니다. 사용자가 1000 개의 프로젝트를 모두 ProjectScreen에서 열지 않기 때문에 두 개의 프로젝트 만로드됩니다. 하나의 프로젝트를 변경하면 while 배열의 복사본을 강제로 유지하여 변경할 수 없게됩니다.

나는 조기 최적화에 집착하고 싶지 않아,하지만 난 처음부터 어느 정도 바로 가게의 구조를 좀하고 싶습니다. 나는 Immutable.js를 사용하여 목록의 항목 업데이트를 최적화 할 수 있다는 것을 알고 있지만, JS 개체가 아닌 JS 개체를 사용하게되어 부담 스럽습니다.

차라리 원활한-불변의 사용 싶지만, 큰 목록의 부분 업데이트의 이런 종류의 목록을 복사하는 것보다 SI로 빠르게 될 것입니다 생각하지 않습니다.

성능이 UI 렌더링 및 기타 작업과 비교할 때 문제가되지 않는다는 사실을 알고 싶습니다. 이렇게하면 도메인 구조를 사용하는 것이 더 간단 할 것입니다.

답변

4

도메인, 절대적으로. 상점 구조는 작업중인 실제 데이터를 완전히 반영해야합니다. 그런 다음 UI 레이어는 구성 요소별로 필요한 변환을 수행해야합니다. 주로 mapStateToProps 함수를 사용해야합니다. 귀하의 애플리케이션을 구성하는 행동과 행동에 중점을 두어을 핵심으로 삼으십시오. (이것은 또한뿐만 아니라 더 나은 테스트 설정에 연결되어야합니다.)

중첩 또는 관계형 데이터베이스의 테이블과 유사한를 정상화하는 데이터를 구성하는 가장 좋은 방법입니다. 이 개념을 어느 정도 설명하는 몇 가지 사전 답변을 작성하고 몇 가지 추가 기사 및 토론과 연결합니다 ([0], [1], [2]).

일반적으로 최소한 Immutable.js를 사용하지 말 것을 권장합니다. 응용 프로그램이 올바르게 구성되어 있다면 에 약간의 성능 향상을 제공 할 수 있지만 잠재적 인 잠재적 인 함정도 많이 있습니다 ([3]). 나는 일반 JS 객체를 고수 할 것을 제안한다. 불변의 방식으로 이들을 사용하는 다양한 방법이 있습니다. 이러한 접근법을 기술 한 기사 목록 ([4])과 일반 JS 객체의 불변 사용을 쉽게 할 수있는 라이브러리 목록 ([5])이 있습니다.

마지막으로, 사실은 Reduce 문서의 새 페이지를 작업하기 시작했습니다. Redux 문서는 리덕터 구성에 대한 모범 사례를 설명합니다.쓰고 세련되게하려면 약간의 시간이 걸리지 만, 당신은 그것을 계속 지켜 볼 수 있습니다. 문제는 [6]에 있으며, 현재 WIP 기사 분기에 대한 링크가 있습니다.

[0] https://stackoverflow.com/a/38105182/62937
[1] https://stackoverflow.com/a/38017227/62937
[2] https://stackoverflow.com/a/37997192/62937
[3] https://github.com/markerikson/react-redux-links/blob/master/react-performance.md#immutable-data
[4] https://github.com/markerikson/react-redux-links/blob/master/immutable-data.md
[5] https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md
[6] https://github.com/reactjs/redux/issues/1784

편집 :

후속 조치로서 Redux 문서 이제이 주제에 대한 다양한 정보가 포함 된 "Structuring Reducers" section을 포함하십시오.

관련 문제