React-Redux 복합(심층) 상태 객체

React-Redux 복합(심층) 상태 객체

초기 리덕스 상태는 다음과 같습니다.

const state = {
  currentView: 'ROOMS_VIEW',
  navbarLinks: List([
    {name: 'Rooms', key: 'ROOMS_VIEW'},
    {name: 'Dev', key: ''}
  ]),
  roomListsSelected: {group: 0, item: 0},
  roomLists: [
    {
      name: "Filters",
      expanded: true,
      listItems: [
        { icon: 'images/icon-warning.svg', name: 'Alerts', filter: room => room.hasAlert },
        { icon: 'images/icon-playlist.svg', name: 'In Progress', filter: room => room.progress > 20 },
        { icon: 'images/icon-playlist.svg', name: 'Almost Done', filter: room => room.progress > 90 },
        { icon: 'images/icon-playlist.svg', name: 'Complete', filter: room => room.status === 'complete' },
        { icon: 'images/icon-playlist.svg', name: 'Recently Completed', filter: room => false },
        { icon: 'images/icon-playlist.svg', name: 'All Rooms', filter: room => true }
      ]
    }
  ],
  rooms: List(generateRooms())
}

이 기능을 하는 리듀서를 만들어야 합니다.

state.roomList[n].expanded = !state.roomList[n].expanded

저는 Redux 워크플로우를 처음 사용하는데, 이 문제를 해결하는 가장 좋은 방법은 roomList를 불변.js 객체로 만들거나 코드를 작성하여 상태 객체의 딥 클론을 만드는 것입니다.

또한 state.roomList에는 향후 기능에서 새로운 데이터가 푸시됩니다.

Summery / 질문:상태 깊은 곳에서 이와 같은 변경을 가하거나 Redux 상태 객체의 구조를 변경해야 할 때 리듀서에서 새 상태 객체를 반환하는 가장 좋은 방법은 무엇입니까?

내가 한 일은 결국 불변의 길처럼 보인다.Imputable에는 리액트 렌더링 시간을 단축하기 위한 몇 가지 요령이 있으며 모든 프로젝트 요건을 충족합니다.또한 큰 변경 없이 새 라이브러리를 사용하는 것은 프로젝트의 초기 단계입니다.

첫째, 관용어인 Redux는 당신이 당신의 상태를 "정상화"하고 가능한 한 평평하게 만들 것을 장려한다.아이템 ID에 의해 키 입력된 오브젝트를 사용하여 아이템을 직접 조회할 수 있습니다.ID 배열을 사용하여 순서를 지정합니다.또한 한 아이템이 다른 아이템을 참조할 필요가 있는 장소에는 실제 데이터 대신 다른 아이템의 ID만 저장됩니다.이를 통해 중첩된 개체를 보다 쉽게 검색하고 업데이트할 수 있습니다.중첩된 데이터에 대한 Redux FAQ를 참조하십시오.

또한 현재 많은 기능을 Redux 상태로 직접 저장하고 있는 것 같습니다.기술적으로는 가능하지만, 확실히 관용적이지 않고, 시간 여행 디버깅과 같은 기능이 손상되기 때문에 매우 권장되지 않습니다.Redux FAQ에서는 직렬화할 수 없는 값을 Redux 상태로 저장하는 것이 좋지 않은 이유에 대해 자세히 설명합니다.

편집:

후속 조치로 최근 Redux 문서에 "Reducers 구조화"라는 새로운 섹션을 추가했습니다.특히 이 섹션에서는 "상태 형상 정규화" 및 "정규화된 데이터 업데이트" 장과 "불가능한 업데이트 패턴"에 대해 설명합니다.

환원제 구성:단순한 데이터 구조를 처리할 수 있을 정도로 작게 리듀서를 소형으로 분할할 수 있습니다.예: 다음과 같은 경우:roomListReducer listItemsReducer listItemReducer각 리덕터에서는, 자신이 어느 주를 상대하고 있는지를 보다 용이하게 읽을 수 있습니다.각 리듀서가 작은 데이터를 처리하기 때문에 '심복사 또는 얕은 복사'와 같은 걱정은 하지 않아도 되기 때문에 많은 도움이 많이 됩니다.

개인적으로 사용하지 않는 불변immutable.js왜냐하면 나는 평범한 오브젝트를 다루는 것을 선호하기 때문이다. 그리고 새로운 API를 채택하기 위해 변경하기에는 코드가 너무 많다.단, 항상 순수한 기능을 통해 상태변화가 이루어지도록 하는 것이 중요합니다.따라서 단순히 자신의 도우미 기능을 작성하여 원하는 것을 할 수 있습니다.복잡한 물체를 다룰 때 철저히 테스트해야 합니다.

또는 단순히 각 리듀서에서 상태를 상세하게 복사하고 복사본에서 변환한 후 복사본을 반환할 수 있습니다.하지만 이것은 분명히 최선의 방법이 아니다.

언급URL : https://stackoverflow.com/questions/37980109/react-redux-complex-deep-state-objects