감속기 구성에 대한 모범 사례

Question

이것은 redux에서의 첫 번째 응용 프로그램입니다. 전에 모든 페이지 패턴에 대해 하나의 감속기를 따라 갔지만 앱이 복잡해지면서 하위 감속기로 나누는 것이 필요하다는 것을 알게되었습니다. 그래서 숙제를 끝냈고 redux에 명시된 예제를 살펴 보았습니다. 현재 상황이 내게 selectors을 사용할 수 있다고 생각하지만 근본적인 상황에 대해 내 감속기를 구성하는 것이 가장 좋은 방법인지는 확실하지 않습니다.

또한 내가 따르는 구성표는 페이지 당 하나의 스마트 구성 요소이며 다른 구성 요소는 전달 된 모든 내용을 방금 내보내는 SFC입니다. 페이지 상단 부분에 등록 양식이 있으며 비동기 작업이 있습니다. 맨 아래 부분은 배열과 백엔드 호출을 표시합니다.

const initialState = { 
    isFetching: false, 
    isCreating: false, 
    isDeleting: false, // Delete object from the bottom part 
    formStatus: '', // Displays status of the top part of backend call 
    blockStatus: '', // Status for the bottom part. GroupsList 
    statusType: '', 
    groupsList: [] // Fetch list for the bottom part 
}; 

또한, 나는이 groupsList에서 백엔드에 게시하는 필터링 된 목록의 정렬을 유지해야 할 것입니다 :

그래서,이 페이지에 대한 나의 초기 상태입니다. 여기 셀렉터를 사용하는 것이 좋을까요?

또한, 거기에 내가 아래에있는 목록의 각 개체에서 페이지 하단 부분에서 시작하는 다른 전화 그리고 그것은 내가 groupsList에서 각 개체에 추가 할 추가 목록을 가져옵니다. 기본 상태를 유지하고 상태를 정상화하는 것이 좋음을 염두에두면 내 감속기를 무너 뜨리는 것이 좋습니다.

편집 : 정보가 누락되었다고 생각됩니다. 앱의이 부분은 두 부분으로 나뉩니다. 따라서 나는 GroupsPage이라는 저장소에 연결된이 구성 요소를 가지고 있습니다. GroupsPage에는 GroupsForm과 GroupsBlock의 두 가지 구성 요소가 있습니다.

• GroupsForm는 사용자가 새로운 그룹을 생성하고 성공적인 창조에이 GroupsBlock에서 그룹 목록의 배열 에 추가 될 수 있도록 텍스트 필드의 무리가 있습니다. GroupsBlock에는 Table 구성 요소가 있으며 페이지로드시 API에서 가져온 그룹 목록을 표시합니다. 그룹 블록의 각 행에는 두 개의 아이콘이 있습니다. 하나는 그룹 정보를 편집하고 다른 하나는 그룹을 삭제하는 것입니다.

지우기 및 그 외 모든 것은 간단합니다. 복잡성은 편집 버튼이 트리거되는 경우입니다. 수정 버튼을 클릭하면 모달을 통해 내 그룹 목록으로 끌어다 놓을 수있는 몇 가지 사용 가능한 그룹 속성을 가져 오는 API 호출이 있으며 업데이트 된 그룹 목록을 백엔드에 추가로 게시합니다.

그래서 내 감속기 조성물은 (세부 사항) 다음과 같습니다

const initialState = { 
      isCreating: false, 
      isUpdatingContainersGroup: false, 
      isFetchingGroups: false, 
      isFetchingGroupHosts: false, 
      isDeleting: false, 
      didCreate: false, 
      didDelete: false, 
      didUpdateContainersGroup: false, 
      didFetchGroups: false, 
      didFetchGroupHosts: false 
      formStatus: '', 
      blockStatus: '', 
      statusType: '' 
      groupsList: [properties: [{}...{}]], 
      availableProperties: [{}.. {}], 
      newProperties: [{}... {}] // Have to maintain an array for new properties added. To post updated data 
       }; 

을 그래서, 개인적으로 나는이 모든 꽤 엉망이라고 생각하고 나뿐만 아니라 감속기 아마 선택기를 하위의 일종이 필요하고 필요 일관성을 유지하기 위해 앱 전체에 구현해야합니다.

중요 나는 앱 전체에서 같은 패턴을 따르고 있습니다. 모든 페이지에는 양식과 블록이 있습니다. 그리고 모든 페이지마다 하나의 연결된 구성 요소와 그 안에있는 다른 모든 구성 요소가 SFC에 불과합니다.

Answer 1

더 많은 것을 돕고 싶지만, 나는 어둠 속에서 여전히 몇 가지 일을하고 있습니다. 그리고 내가 평판이 50 가지가 아니기 때문에 나는 말할 수 없다. 당신은 앱에 대한 사용자 이야기를 할 수 있는가? 그것이하는 것과, 그것이하는 것, 그리고 국가가 어떻게 의미있는지를 통해 나를 걸어보십시오. 선택자는 무엇이 필요합니까? 계속해서 계산되는 것은 무엇입니까? 당신이 제공 한 정보로 감속기를 분해 할 필요가 없다는 느낌이 들지만, 무엇을해야할지 /하지 말아야할지에 대한 의견을 제시하기 전에 응용 프로그램에 대한 더 좋은 생각을 갖고 싶습니다.

답변을 보내 주시면 답변을 편집하겠습니다. 실제로는 에 번으로 답변 해 드리겠습니다. 감사!

편집 : 질문에 정보를 업데이트하고 추가해 주셔서 감사합니다. 많은 도움을줍니다. 편집 버튼을 클릭에

내가 N 드래그 그룹 내 목록에 모달를 통해 삭제 및 추가 업데이트 된 그룹이 백엔드에 목록을 게시 할 수있는 몇 가지 가능한 그룹 속성을 가져 오기 위해 API 호출이있다.

왜 복잡한 부분입니까? 그것에 대해 무엇이 복잡합니까? 어떤 부분이 문제가됩니까?

앱의 데이터 흐름에서 감속기를 분리하거나 다시 선택 같은 것을 사용할 필요가 없습니다. 기억해야 할 것들은 무엇입니까?

나는 당신이 정상적인 방법으로 구성 요소를 설치했다고 생각하지만, 귀하의 redux 저장소의 모양은 응용 프로그램이 현재하고있는 일에 약간 털이 보인다. 접두사가 모두 is 또는 did 인 모든 속성의 경우 그들의 용도는 무엇입니까? 이 모든 것을 듣는 UI 부분이 있습니까? 이 사용자에게 정보를 전달하기 위해 단지의 경우이 같은 더 일반적인 작업을 할 수 있습니다 :

{ type: 'APP_STATUS', info: { type: 'success', details: 'Created group' } } 

당신은 그러나 당신이 원하는 메시지의 스타일을 위해 info 개체에 type 속성을 사용할 수 있습니다. 나는 모든 작은 일을 묘사하는 주에서 20 개의 속성을 가지지 않고 이런 방식으로 훨씬 더 성공적으로 성공했습니다.

편집

이 조금 그래,하지만 난 복용 기존의 중첩 배열을 필요로하고 일부 작업을 적용한 후 일부 데이터를 뱉어 것 계산을해야합니다. 그러나 내가 atm을 알고 싶다면 목록에 더 많은 객체를 나열하고 더 많은 객체를 추가해야합니다. 어떤 형태로든 을 정규화하거나 동일한 패턴을 유지하고 중첩 할 필요가 있습니까?

이것은 주로 귀하에게 달려 있습니다. 최소한 당신은 물론 더 좋은 것을 중첩 할 수 있지만, 객체의 배열에는 아무런 문제가 없습니다.

최근에 감속기를 업데이트하여 세 가지 주요 개체를 갖게되었습니다. groups 그룹, groupsMessages 및 groupsStore. 그리고 각 물체는 기본적으로 서브 감속기 입니다. 이 방법을 통해 내 감속재를 청결하고 관리하기 쉽게 유지할 수 있습니까? 아니면 을 더 잘 관리 할 수있는 방법이 있습니까?

세 가지 주요 개체가 있도록 상태를 업데이트 했습니까? 귀하의 감속기를 나누는 동안, 국가의 다른 부분에 대해 국가의 어떤 부분을 알아야 하는지를 아는 것이 중요합니다. 나머지 국가에 대해 알 필요가없이 물건을 충분히 감금하면 괜찮습니다.

솔직히, 나는 당신이 "내 결정을 내릴 수있게되었습니다"라고 생각합니다. 나는 몇 달 전에 여기에 있었는데, 나는 항상 내가 묻고있는 것에 대해 명확한 답이있는 것처럼 느꼈다. 금요일 오후에 리팩토링을 한 후 재 선택을 포함한 3 가지 별도 패키지를 살펴 보았습니다. 나는 그것들을 모두 구현했고, 그들이 나를 도와주지 않는다고 결론을 내렸다.

현재 귀하와 귀하의 앱에 도움이되는 것이 전부입니다. 과거, 현재 및 미래에 대해 조금 생각해보십시오. 당신은 객체와 배열을 할당하고 움직이는 것입니까, 아니면 정말로 무언가를 계산할 필요가 있습니까? 세 개의 개별 감속기가있을 수 있도록 앱이 너무 체계적으로 구성되어 있습니까? 아니면 하나의 전역 수준과 단일 감속기가 있어야합니까? 이것들은 당신 만이 대답 할 수있는 질문입니다.

죄송합니다. 귀하의 행동에 대한 직접적인 답변이 없지만 귀하가 올바른 길을 가고 있다고 생각합니다. 오른쪽 코드, 테스트, 리펙토링, 반복 당신은 당신의 응용 프로그램의 무엇과 왜 당신이 끊임없이 질문하고 있다면 잘 할 것입니다.