React/Redux - 렌더링하기 전에 상태를 마사지하는 것이 안전합니까?

테트리스를 React/Redux로 만들고 있습니다. Brandly's non-redux version을 참조/팁으로 사용하고 일부 유틸리티를 당깁니다.React/Redux - 렌더링하기 전에 상태를 마사지하는 것이 안전합니까?

2d 어레이로 표시되는 상점 (게임 보드)이 있다고 가정 해 보겠습니다. 값은 false 또는 조각의 클래스 이름 (색칠)입니다.

또한 재생할 다음 곡을 나타내는 두 번째 곡이 있습니다 (현재 재생되지만 아직 설정되지 않은 곡도 포함).

은 렌더링을 담당하는 보드 구성 요소의 내부 상점은 너무로 소품에 부착되어 pieceSetter 추가하는 유틸리티 기능이 어디에

render() { 
    var piece = this.props.PieceList.currentPiece; 
    var newBoard = _.cloneDeep(this.props.Board); 
    pieceSetter(newBoard)(piece._piece.blocks[piece._rotation], piece._position, piece._piece.className); 
    return (
     <div className="board"> 
     {newBoard.map((x, i) => 
      <Row value={x} key={i}/> 
     )} 
     </div> 
    ) 
    }

const mapStateToProps = (state) => { 
    return { 
    Board: state.Board, 
    PieceList: state.PieceList 
    } 
}

는 같은 기능을 보이는 렌더링의 나 보드에 조각.

정보를 결합하기 위해 일부 데이터 마사지를 렌더링하는 것이 적절합니까? 이 특별한 경우에는 보드에 "현재 조각"을 추가하여 표시합니다.

현재 운동 유효성 검사 기능이 현재 처리되는 방식 때문에 보드의 저장소에 현재 조각을 추가하는 것을 피하고 싶습니다. 보드는 현재 운동 유효성 검사를위한 "현재"부분을 무시하고 조각이 어디에 있는지 고려합니다. "배치되지 않은 부분"의 개념 없음)

반 패턴을 만들거나 적절한 것으로 간주 할 수 있습니까?

출처

2017-05-10 Hodrobond

아마겟 디안의 대답은 정확하다고 생각합니다. 렌더 메소드를 순수하게 유지하고 mapStateToProps에서 데이터 조작을 수행하려고합니다. 나는 redux에 단 하나의 가게가 있음을 주목하고 싶다. 매장 (Board Store, Piece Store)으로 지칭하는 것은 실제로 작업에 대한 응답으로 감속기를 통해 업데이트되는 단일 상점의 속성입니다. –

@realseanp 나는 동의하고 받아들이 기 전에 받아들이 기 전에 다른 답변이 필터로 받아 들여지는 것을보기 위해 좀 더 오래 기다릴 것입니다. 원 스토어 주셔서 감사합니다. 그것은 개념적으로 이해하지만 무미건조 한 표현으로 잘못된 표현을하고 앞으로 올바른 구문을 사용하려고합니다. =) – Hodrobond

이러한 종류의 로직을 렌더링 기능 외부에 배치하는 것이 바람직합니다. 예를 들어 해당 코드를 mapStateToProps 안에 넣고 render 함수를 프리젠 테이션으로 줄이십시오.

또한 _.cloneDeep을 사용하여 Board 개체를 복사 할 필요가 없습니다. 렌더링 체인의 구성 요소 및 컨테이너를 반품해도 상점의 오브젝트 상태가 변경되지 않습니다.

출처

2017-05-10 20:31:28 amageddian

React/Redux - 렌더링하기 전에 상태를 마사지하는 것이 안전합니까?

답변

관련 문제