2017-11-29 1 views
2

현재 redux 주위에 두뇌를 감싸고 있는데 현재는 redux에서 종속 상태를 처리하는 방법에 대한 이해 문제가 있습니다. Redux 종속 응용 프로그램 상태

예로서 스프레드 시트 애플리케이션 생각해 전지 A1 및 A2에서는 사용자

값을 입력한다. :;

셀 A3 이제 다음 종속 상태에있는 사용자가 A1에 "2"를 입력 할 때, 이제 (= SUM (A1 A2))

를 => 우리는 'A1 = 2 UpdateCellAction'보내기 "A2 = 4"를 입력하면 "UpdateCellAction : A2 = 4"가 전송됩니다.

그러나 이러한 변경으로 인해 A3의 제 수식에 반응해야하며 합계를보고 상태 개체를 수정해야합니다. 2와 4 중 6

어떻게 Redux에서 이런 일이 이루어 집니까? 그리고 A3, A2 및 A1을 기반으로 다른 값을 계산 한 셀 B22 (다른 것)가 있다면 어떻게 될까요? (그 상태는 A1, A2 및 A3에 달려 있습니다)

답변

1

이것은 일반적인 경우입니다. 재 선택 GitHub의 프로젝트 페이지에서

:

선택기 유도 계산할 수 데이터, 돌아 오는는 최소한의 가능한 상태를 저장 할 수 있도록 당신이 찾고있는 것은 다시 선택/반응 라이브러리입니다.

셀렉터가 효율적입니다. 선택기는 인수 중 하나가 변경되지 않으면 다시 계산되지 않습니다.

셀렉터를 구성 할 수 있습니다. 다른 선택자에 대한 입력으로 사용할 수 있습니다.

+0

@ghassenlouhaichi가 여기에 한 가지 점을 알았지 만 실제로 이것은 가능한 해결책을 지적했습니다. –

1

각 셀을 개별 구성 요소로 간주할지 여부는 명확하지 않습니다.


각 셀은 개별 구성 요소의 경우 : 당신은 행동 각 셀을 편집 할 때마다 파견하고 돌아 오는 저장소에 고유 키에 따라 그 값을 유지하기 위해 돌아 오는을 사용

. 또한 mapStateToProps를 사용하여 로컬로 계산할 다른 구성 요소의 모든 값을 가져올 수 있습니다.

... 

/** 
* Redux mappings 
*/ 
const mapStateToProps = (state) => { 
return { 
    cellA1: state.cells.cellA1, 
    cellA2: state.cells.cellA2, 
}; 
}; 

const mapDispatchToProps = (dispatch) => { 
return { 
    updateCell: (newCellValue) => { 
    dispatch(Actions.updateCell(newCellValue)); 
    }, 
}; 
}; 

const ConnectedCellComponent = connect(
mapStateToProps, 
mapDispatchToProps, 
)(CellComponent); 

전체 스프레드 시트 구성 요소 인 경우 :

로컬 상태 개체의 모든 셀에 데이터를 저장할 것

, 다음 셀 업데이트는 setState를을 (를 호출 할 때마다) render()가 자동으로 호출되고 모든 셀이 적절하게 다시 계산됩니다.

+0

답변 해 주셔서 감사합니다. 그러나 "mapStateToProps"의 제안 된 사용을 위해서는 셀을 의존하는 지식이 필요합니다 (수식 분석). 또한 셀 A1이 변경 될 때마다 다른 셀 A3이 종속되므로 A3의 값을 업데이트하기 위해 두 번째 작업이 전달됩니다. 이것은 실제로 우리가 필요로하지 않는 두 개의 별개의 순차적 상태 변경을 초래합니다. 종속 셀을 모두 업데이트 할 때 A1을 변경하면 원자 작업이 한 번만 수행됩니다. 그렇지 않으면 다시 실행 취소를 수행 할 수 없습니다. –