[javascript] 개체의 배열과 ID로 키가 지정된 개체의 상태

1) 감속기의 단순성이 object-keyed-by-id 접근 방식을 사용하는 동기입니까? 그 상태 모양에 다른 이점이 있습니까?

키로 ID를 사용하여 저장된 객체 ( 정규화 라고도 함 )에 엔티티를 유지하려는 주된 이유 는 중첩 된 객체 (일반적으로 더 복잡한 앱의 REST API에서 얻는 것) 로 작업하는 것이 정말 번거롭기 때문입니다. 구성 요소와 감속기 모두.

현재 예제로 정규화 된 상태의 이점을 설명하는 것은 약간 어렵습니다 ( 깊게 중첩 된 구조가 없기 때문에 ). 그러나 옵션 (귀하의 예에서)에도 제목이 있고 시스템의 사용자가 생성했다고 가정 해 보겠습니다. 그러면 응답이 다음과 같이 표시됩니다.

[{
  id: 1,
  name: 'View',
  open: false,
  options: [
    {
      id: 10, 
      title: 'Option 10',
      created_by: { 
        id: 1, 
        username: 'thierry' 
      }
    },
    {
      id: 11, 
      title: 'Option 11',
      created_by: { 
        id: 2, 
        username: 'dennis'
      }
    },
    ...
  ],
  selectedOption: ['10'],
  parent: null,
},
...
]

이제 옵션을 만든 모든 사용자 목록을 표시하는 구성 요소를 만들고 싶다고 가정 해 보겠습니다. 이를 위해서는 먼저 모든 항목을 요청한 다음 각 옵션을 반복하고 마지막으로 created_by.username을 가져와야합니다.

더 나은 해결책은 응답을 다음과 같이 정규화하는 것입니다.

results: [1],
entities: {
  filterItems: {
    1: {
      id: 1,
      name: 'View',
      open: false,
      options: [10, 11],
      selectedOption: [10],
      parent: null
    }
  },
  options: {
    10: {
      id: 10,
      title: 'Option 10',
      created_by: 1
    },
    11: {
      id: 11,
      title: 'Option 11',
      created_by: 2
    }
  },
  optionCreators: {
    1: {
      id: 1,
      username: 'thierry',
    },
    2: {
      id: 2,
      username: 'dennis'
    }
  }
}

이 구조를 사용하면 옵션을 만든 모든 사용자를 나열하는 것이 훨씬 쉽고 효율적입니다 (엔티티 .optionCreators에 격리되어 있으므로 해당 목록을 반복하면됩니다).

예를 들어 ID 1의 필터 항목에 대한 옵션을 생성 한 사용자의 사용자 이름을 표시하는 것도 매우 간단합니다.

entities
  .filterItems[1].options
  .map(id => entities.options[id])
  .map(option => entities.optionCreators[option.created_by].username)

2) id에 의한 object-keyed 접근 방식은 API에 대한 표준 JSON 입출력을 처리하는 것을 더 어렵게하는 것 같습니다. (이것이 제가 처음에 객체 배열을 사용하는 이유입니다.) 따라서 이러한 접근 방식을 사용한다면 함수를 사용하여 JSON 형식과 상태 모양 형식간에 앞뒤로 변환합니까? 투박해 보입니다. (당신이 그 접근 방식을 옹호한다면, 위의 객체 배열 감속기보다 덜 투박하다는 추론의 일부입니까?)

JSON 응답은 예를 사용하여 정규화 될 수 normalizr .

3) Dan Abramov가 이론적으로 상태 데이터 구조에 구애받지 않도록 redux를 설계 한 것을 알고 있습니다 ( “관례 상 최상위 상태는 객체 또는지도와 같은 다른 키-값 컬렉션이지만 기술적으로는 유형, “내 강조). 그러나 위의 경우 ID로 키가 지정된 개체를 유지하는 것이 “권장”입니까, 아니면 중단해야하는 개체 배열을 사용하여 실행할 수있는 다른 예상치 못한 문제점이 있습니까? ID로 키가 지정된 개체를 계획하고 유지하려고합니까?

깊이 중첩 된 API 응답이 많은 더 복잡한 앱에 대한 권장 사항 일 수 있습니다. 그러나 귀하의 특정 예에서는 그다지 중요하지 않습니다.