React Redux 앱에서 상태를 정규화하는 예제는 무엇입니까?

Question

나는 Redux Reducers docs을 읽고 있는데 상태를 정상화하는 방법을 모르겠다. 이 예의 현재 상태는 다음과 같습니다.

{ 
    visibilityFilter: 'SHOW_ALL', 
    todos: [ 
    { 
     text: 'Consider using Redux', 
     completed: true, 
    }, 
    { 
     text: 'Keep all state in a single tree', 
     completed: false 
    } 
    ] 
} 

아래의 내용을 따르면 위의 내용을 보여줄 수 있습니까?

예를 들어

, 유지 todosById : {ID -> 할 일} 및 수행 할 작업 : 배열 내부의 상태는 실제 응용 프로그램에서 더 좋은 생각이 될 것이다, 그러나 우리는 간단 예를 유지하고 있습니다.

Answer 1

예는 직선 Normalizr 내지 정규화 될 수있다.

[{ 
    id: 1, 
    title: 'Some Article', 
    author: { 
    id: 1, 
    name: 'Dan' 
    } 
}, { 
    id: 2, 
    title: 'Other Article', 
    author: { 
    id: 1, 
    name: 'Dan' 
    } 
}] 

는이

{ 
    result: [1, 2], 
    entities: { 
    articles: { 
     1: { 
     id: 1, 
     title: 'Some Article', 
     author: 1 
     }, 
     2: { 
     id: 2, 
     title: 'Other Article', 
     author: 1 
     } 
    }, 
    users: { 
     1: { 
     id: 1, 
     name: 'Dan' 
     } 
    } 
    } 
} 

정상화의 장점은 무엇입니까

을 방법 - 정규화 할 수 있습니까?

원하는 상태 트리의 정확한 부분을 추출합니다.

예를 들어, 기사에 대한 정보가 들어있는 개체 배열이 있습니다. 해당 배열에서 특정 개체를 선택하려면 전체 배열을 반복해야합니다. 최악의 경우는 원하는 객체가 배열에 없다는 것입니다. 이를 극복하기 위해 우리는 데이터를 표준화합니다.

데이터를 표준화하려면 각 개체의 고유 식별자를 별도의 배열에 저장하십시오. 이 배열을 results이라고 부릅시다.

result: [1, 2, 3 ..]

그리고 id 같은 키 대상 물체의 배열 변환 (제 니펫 참조). 해당 개체를 entities으로 호출하십시오.

궁극적으로 id 1로 개체에 액세스하려면이 작업을 수행하십시오 (entities.articles["1"]).

Answer 2

normalizr을 사용할 수 있습니다.

Normalizr은 JSON과 스키마를 가져 와서 중첩 된 엔티티를 ID로 대체하여 사전에있는 모든 엔티티를 수집합니다. 예를 들어

,

[{ 
    id: 1, 
    title: 'Some Article', 
    author: { 
    id: 1, 
    name: 'Dan' 
    } 
}, { 
    id: 2, 
    title: 'Other Article', 
    author: { 
    id: 1, 
    name: 'Dan' 
    } 
}] 

는

{ 
    result: [1, 2], 
    entities: { 
    articles: { 
     1: { 
     id: 1, 
     title: 'Some Article', 
     author: 1 
     }, 
     2: { 
     id: 2, 
     title: 'Other Article', 
     author: 1 
     } 
    }, 
    users: { 
     1: { 
     id: 1, 
     name: 'Dan' 
     } 
    } 
    } 
}