[javascript] Redux-여러 상점, 왜 그렇지 않습니까?

참고로 : 나는 Redux (Baobab)에 대한 문서를 읽었으며 Googling & testing에 대해 상당한 부분을 공유했습니다.

Redux 앱에 하나의 스토어 만있는 것이 왜 그렇게 강력하게 제안됩니까?

단일 상점 설정과 다중 상점 설정의 장단점을 이해합니다 ( 이 주제에 대해서는 SO에 대한 많은 Q & A가 있습니다 ).

IMO,이 아키텍처 결정은 프로젝트 요구에 따라 앱 개발자에게 속합니다. 그렇다면 왜 의무적으로 들리는 지점까지 Redux에 강력히 제안되어 있습니까 ( 여러 매장을 만드는 데 방해가되지는 않지만 )?

편집 : 단일 저장소로 변환 한 후 피드백

몇 달 동안 많은 사람들이 복잡한 SPA를 고려할 때 redux와 함께 일한 후, 단일 상점 구조는 순수한 기쁨이었습니다.

단일 저장소 대 많은 저장소가 많은 유스 케이스에서 왜 까다로운 질문인지 이해하는 데 도움이되는 몇 가지 사항 :

  • 신뢰할 수 있습니다 : 선택기를 사용하여 앱 상태를 파고 컨텍스트 관련 정보를 얻습니다. 필요한 모든 데이터가 단일 저장소에 있다는 것을 알고 있습니다. 그것은 국가 문제가 어디에있을 수 있는지에 대한 모든 의문을 피합니다.
  • 빠르다 : 우리 매장에는 현재 100 개에 가까운 감속기가 있습니다. 그 수에 관계없이 주어진 디스패치에서 소수의 감속기 만 데이터를 처리하고 나머지는 이전 상태를 반환합니다. 거대 / 복잡한 저장소 ( nbr of reducers )가 느리다는 주장은 상당히 무례합니다 . 최소한 성능 문제가 발생하지 않았습니다.
  • 친숙한 디버깅 : 이것은 redux를 전체적으로 사용하는 가장 설득력있는 주장이지만 단일 저장소 대 다중 저장소에도 사용됩니다. 앱을 빌드 할 때 프로세스에서 상태 오류 ( 프로그래머 실수 )가 발생하는 것은 정상입니다. PITA는 이러한 오류가 디버깅하는 데 몇 시간이 걸리는 경우입니다. 단일 저장소 ( 및 redux-logger ) 덕분에 특정 주 문제에 몇 분 이상을 투자 한 적이 없습니다.

몇 가지 조언

Redux Store를 구축 할 때 실제로 해결해야 할 과제는 구조화 방법을 결정할 때 입니다. 첫째, 도로 구조를 바꾸는 것은 큰 고통이기 때문입니다. 둘째, 사용 방법을 결정하고 모든 프로세스에 대해 앱 데이터를 쿼리하기 때문입니다. 상점을 구성하는 방법에 대한 많은 제안이 있습니다. 우리의 경우 다음이 이상적이라는 것을 알았습니다.

{
  apis: {     // data from various services
    api1: {},
    api2: {},
    ...
  },
  components: {} // UI state data for each widget, component, you name it 
  session: {} // session-specific information
}

이 피드백이 다른 사람들에게 도움이 되길 바랍니다.

편집 2-유용한 상점 도구

단일 상점 을 “쉽게”관리하는 방법을 궁금해 한 사람들에게는 복잡해집니다. 상점의 구조적 종속성 / 논리를 분리하는 데 도움이되는 도구가 있습니다.

Normalizr 스키마를 기반으로 데이터를 정규화. 그런 다음 데이터와 함께 작업 id하고 Dictionary와 같이 데이터를 다른 부분으로 가져 오는 인터페이스를 제공합니다 .

당시 Normalizr을 모르면서 같은 줄을 따라 무언가를 만들었습니다. relational-json 은 스키마를 가져 와서 데이터베이스와 비슷한 테이블 기반 인터페이스를 반환합니다 . relational-json의 장점은 데이터 구조가 데이터의 다른 부분을 동적으로 참조한다는 것입니다 ( 기본적으로 일반 JS 객체와 마찬가지로 모든 방향으로 데이터를 탐색 할 수 있음) ). Normalizr만큼 성숙하지는 않지만 현재 몇 달 동안 프로덕션에서 성공적으로 사용하고 있습니다.



답변

여러 상점을 사용할 수있는 경우가 있습니다 (예 : 초당 같은 시간에 화면에있는 수천 개의 항목 목록을 업데이트하는 데 성능 문제가있는 경우). 그것은 예외이며 대부분의 앱에서는 단일 저장소 이상을 필요로하지 않습니다.

문서에서 왜 이것을 강조합니까? 플럭스 배경에서 온 대부분의 사람들은 여러 상점이 업데이트 코드를 모듈화하는 솔루션이라고 가정합니다. 그러나 Redux에는이를위한 다른 솔루션이 있습니다 : 리듀서 구성.

리듀서 트리로 더 분할 된 여러 리듀서를 갖는 것은 Redux에서 모듈 식 업데이트를 유지하는 방법입니다. 이것을 인식하지 못하고 감속기 구성을 완전히 이해하지 않고 여러 상점을 방문한다면 Redux 단일 상점 아키텍처의 많은 이점을 놓치게 될 것입니다.

  • 감속기 구성을 사용하면 waitFor추가 정보와 특정 순서로 다른 감속기를 수동으로 호출하는 감속기를 작성하여 Flux에서 “종속 업데이트”를 쉽게 구현할 수 있습니다 .

  • 단일 저장소를 사용하면 상태를 유지하고 수화하고 읽는 것이 매우 쉽습니다. 서버 렌더링 및 데이터 프리 페칭은 클라이언트에서 채우고 다시 수화해야하는 데이터 스토리지가 하나뿐이므로 JSON은 상점의 ID 또는 이름에 대한 걱정없이 컨텐츠를 설명 할 수 있기 때문에 간단합니다.

  • 단일 저장소는 Redux DevTools 시간 여행 기능을 가능하게합니다. 또한 환원 기 수준에서 작동하기 때문에 redux-undo 또는 redux-optimist와 같은 커뮤니티 확장을 쉽게 만듭니다. 이러한 “감소 기 향상제”는 상점에 쓸 수 없습니다.

  • 단일 상점은 디스패치가 처리 된 후에 만 ​​구독이 호출되도록 보장합니다. 즉, 리스너가 알림을받을 때까지 상태가 완전히 업데이트되었습니다. 많은 상점에서 그러한 보장은 없습니다. 이것이 플럭스에 waitFor목발이 필요한 이유 중 하나입니다 . 단일 상점의 경우 처음에는 문제가 아닙니다.

  • 무엇보다도 Redux에서는 여러 상점이 불필요합니다 (어쨌든 먼저 프로파일 링해야하는 성능 측면의 경우 제외). 우리는 문서에서 중요한 점을 지적하므로 플럭스처럼 Redux를 사용하지 않고 감속기 구성 및 기타 Redux 패턴을 배우고 그 이점을 잃는 것이 좋습니다.


답변

수백 또는 수천 개의 리듀서가있는 대규모 엔터프라이즈 앱에서는 앱의 여러 영역을 완전히 별도의 앱으로 생각하는 것이 종종 유용합니다. 이 경우 (실제로 도메인 이름을 공유하는 여러 앱인 경우) 여러 저장소를 사용합니다.

예를 들어 다음과 같은 공통 기능 영역을 별도의 앱으로 취급하는 경향이 있습니다.

  • 관리자
  • 대시 보드 분석 / 데이터
  • 결제 관리 및 구매 흐름
  • 엔터프라이즈 계정 팀 / 권한 관리

그중 하나라도 작 으면 기본 앱의 일부로 유지하십시오. 엔터프라이즈 계정 관리 및 분석 도구와 같이 매우 커지면이를 분리하십시오.

매우 큰 앱을 관리하는 가장 좋은 방법은 여러 개의 작은 앱 구성으로 취급하는 것입니다.

앱이 ~ 50k LOC 미만인 경우이 조언을 무시하고 대신 Dan의 조언을 따라야합니다.

앱이 1 백만 LOC를 초과하는 경우 모노 리포지토리로 유지하더라도 미니 앱을 분리해야합니다.


답변

이 아키텍처 결정은 프로젝트 요구에 따라 앱 개발자에게 속합니다

당신은 자신의 세계에 살고 있습니다. 나는 redux를 사용하는 사람들과 매일 만나고 있습니다. 의사 결정없이 얼마나 많은 프로젝트가 리 덕싱을 시작했는지 상상조차 할 수 없었습니다. 나는 다른 개발자가 아무것도 모르기 때문에 redux 접근법을 싫어하지만 그것을 사용해야했습니다. 그것은 페이스 북에 의해 팽창 된 서사시적인 거품 일뿐입니다.

  • 신뢰할 수 없다상점의 일부가 격리되어 있지 없습니다.
  • 비효율적이다해시 트리를 복제하고 통과하기 때문에 입니다. 돌연변이가 산술적으로 커지면 복잡성이 기하학적으로 커집니다. 감속기, 선택기 등을 리팩토링하여 문제를 해결할 수 없습니다. 트라이를 분리해야합니다.
  • 속도가 느려지면 아무도 별도의 저장소가있는 별도의 응용 프로그램으로 나누기를 원하지 않습니다. 아무도 리팩토링에 돈을 쓰고 싶어하지 않습니다. 사람들은 일반적 으로 일부 스마트 구성 요소를 덤프로 변환합니다 하고 있습니다. redux 개발자를 위해 어떤 미래가 기다리고 있는지 알고 있습니까? 그들은이 지옥을 유지합니다.
  • 친절한 디버깅이 아닙니다 . 사실상 격리 된 상점 부분 사이의 연결을 디버그하기는 어렵습니다. 이러한 연결의 양을 분석하는 것조차 매우 어렵습니다.

여러 redux 상점이 있다고 상상해보십시오. 단방향 데이터 흐름이 중단됩니다. 상점 간의 연결이 얼마나되는지를 즉시 알 수 있습니다. 이러한 연결로 인해 원형 뎁과 싸울 수 있습니다.

단방향 흐름을 가진 단일 불변 상점은 모든 질병의 비약이 아닙니다. 프로젝트 아키텍처를 유지하지 않으려면 어쨌든 어려움을 겪을 것입니다.


답변

다음과 같은 사용 사례에서 여러 저장소가 도움이 될 수 있습니다. 1. 데이터 구조, 동작, 응용 프로그램 컨텍스트와 관련하여 서로 독립적 인 큰 구성 요소가있는 경우. 이러한 구성 요소를 분리하면 데이터 및 응용 프로그램 흐름을보다 쉽게 ​​관리 할 수 ​​있습니다. 또한 구성 요소를 독립적으로 개발하고 유지 보수하는 데 도움이됩니다. 2. 성능 문제 : 일반적인 사용 사례는 아니지만 일부 구성 요소가 자주 업데이트되고 다른 구성 요소에 영향을 미치지 않는 경우 다른 상점으로 이동할 수 있습니다.

다른 모든 경우에는 여러 상점이 필요하지 않을 수 있습니다. Dan이 말했듯이, 신중한 감속기 구성을 만드는 것이 더 나은 솔루션 일 수 있습니다.


답변

왜 redux를 사용하여 여러 저장소를 사용할 수 없습니까 ????

데이터 도메인 사이의 분리는 단일 리듀서를 더 작은 리듀서로 분할하여 이미 수행되므로 Redux에서는 필요하지 않습니다.


여러 상점을 작성할 수 있습니까? 상점을 직접 가져 와서 구성 요소에서 직접 사용할 수 있습니까?

원래 Flux 패턴은 앱에 여러 개의 “저장소”가 있으며 각각은 서로 다른 도메인 데이터 영역을 보유합니다. 이로 인해 하나의 상점이 다른 상점을“waitFor”해야 업데이트와 같은 문제가 발생할 수 있습니다.

데이터 도메인 사이의 분리는 단일 리듀서를 더 작은 리듀서로 분할하여 이미 수행되므로 Redux에서는 필요하지 않습니다.

몇 가지 다른 질문과 마찬가지로 페이지에서 여러 개의 고유 한 Redux 저장소를 생성 할 수 있지만 의도 한 패턴은 단일 저장소 만 갖는 것입니다. 단일 저장소가 있으면 Redux DevTools를 사용할 수 있고 데이터 유지 및 재수 화가 단순 해지고 가입 논리가 간소화됩니다.

Redux에서 여러 상점을 사용하는 몇 가지 유효한 이유는 다음과 같습니다.

앱을 프로파일 링하여 확인할 때 상태의 일부를 너무 자주 업데이트하여 발생하는 성능 문제를 해결합니다. 더 큰 응용 프로그램에서 Redux 앱을 구성 요소로 격리하면 루트 구성 요소 인스턴스 당 저장소를 만들 수 있습니다. 그러나 새로운 매장을 만드는 것이 첫 번째 본능이되어서는 안됩니다. 특히 Flux 배경을 가지고 있다면 더욱 그렇습니다. 감속기 구성을 먼저 시도하고 문제가 해결되지 않으면 여러 상점 만 사용하십시오.

마찬가지로 상점 인스턴스를 직접 가져 와서 참조 할 수 있지만 Redux에서는 권장되지 않습니다. 상점 인스턴스를 작성하고 모듈에서 내 보내면 단일 인스턴스가됩니다. 즉, Redux 앱을 필요한 경우 더 큰 앱의 구성 요소로 격리하거나 서버 렌더링을 활성화하기가 더 어려워집니다. 서버에서 모든 요청에 ​​대해 별도의 스토어 인스턴스를 생성하려고하기 때문입니다.

redux의 공식 문서


답변

Redux에 하나의 매장을 갖는 것이 실제로 많은 경우에 필요한 것입니다. 저는 Redux와 Flux를 모두 사용했으며 Redux가 더 잘 작동한다고 생각합니다!

상점이 JavaScript 객체에 있다는 것을 잊지 마십시오. 단 하나의 상점 만 가지고 있지만 쉽게 확장하고 재사용 할 수 있습니다. 하나의 상점을 사용하면 Redux dev 도구를 사용하여 훨씬 쉽게 횡단 할 수 있습니다. 큰 응용 프로그램 …

또한 하나의 상점 개념은 데이터베이스를 모방하고 있으며, 진실의 원천은 변경하여 브라우저 메모리에서 액세스 할 수 있습니다 …

전체 응용 프로그램을 잘 관리하면 하나의 저장소로 전체 응용 프로그램 상태를 관리 할 수 ​​있습니다 …


답변