Redux: 그래서 html5 canvas로 redux 거래를 사용하는 방법

에 만든 2015년 07월 21일 · 3코멘트 · 출처: reduxjs/redux

안녕하세요, 저는 캔버스 영역이있는 프로젝트가 있으며 3 개의 정적 레이아웃 중 하나에서 그래프 (예 : 노드 + 가장자리)를 렌더링합니다. 다른 구성 요소 (상단 탐색 모음 일 수 있음)에서 사용자가 버튼을 클릭하면 캔버스를 트리거하여 해당 노드와 가장자리에 애니메이션을 적용하고 이동하여 3 개 중 다른 레이아웃으로 변경해야합니다.

그래서 내 문제는 :이 시나리오에서 상황을 그리는 작업이기 때문에 상태가 캔버스를 렌더링하는 데 너무 유용하지 않을 것입니다. 그러나 캔버스에는 여전히 레이아웃 매개 변수 인 "상태"가 있지만 state.layout 가 변경되면 React가 HTML 캔버스 요소를 새로 고치지 않기를 원합니다. 컨텍스트 (캔버스가 아닌 HTML 요소를 다시 렌더링하기 때문에 그렇게하면 애니메이션이 손실됩니다). 따라서 여기서 필요한 것은 Actions를 통한 구성 요소 간의 디스패치뿐입니다.

그러나 Flux (Redux와 동일)에서는 UI 재 렌더링을 트리거하도록 상태를 변경할 것으로 예상되며 UI는 상태 자체를 기반으로합니다. 캔버스에서 액션은 여전히 상태 변경을 트리거 할 것으로 예상되지만 UI (캔버스)는 다시 그려서 렌더링됩니다.

내 프로젝트의 절반 만 캔버스를 사용하고 React에 의해 순수하게 렌더링되는 많은 구성 요소가 있기 때문에 이것을 묻습니다 (예, React를 사용하지만 Flux 패턴을 사용하지 않습니다). 나는 Flux가 제 생각에 약간 "과도하게 설계 되었기"때문에 싫어합니다. 그런 다음이 Redux를 발견했습니다.이 Redux는 Flux에서 싫어하는 부분을 줄여줍니다. 그러나 여전히이 캔버스 문제가 있습니다 .Redux를 사용하는 것이 현명한 지 확실하지 않습니다.

도움이 될만한 몇 가지 팁이나 간단한 코드를 주시겠습니까? 또는 위에서 언급 한 프로젝트에서 Redux를 사용하는 것이 적절하지 않다고 생각한다면 저에게도 알려주십시오.

정말 감사합니다!

추신 : YouTube에서 비디오를 봤습니다 (반응 핫 로더 + Redux 연설과 관련하여). 훌륭한.

question

출처

rui-ktei

👍1

가장 유용한 댓글

내가 당신을 올바르게 이해한다면 이것은 본질적으로 최근에 D3를 React와 통합하는 것과 같은 문제입니다. 초기 <svg> 태그를 생성하고 상태를 렌더링 한 다음 상태가 변경되면 d3 애니메이션을 시작하고 새 요소를 추가하고 요소를 제거하는 등의 작업이 필요했습니다.

이 StackOverflow 기사 는 React가 <svg> 요소를 처음으로 렌더링하도록하는 방법에 대한 설명을 제공합니다 (또는 귀하의 경우 <canvas> ). 상태가 변경 될 때 다시 그릴 수있는 기회를 제공합니다.

다음은 기사의 코드입니다.

React.createClass({
    render: function() {
        return <svg></svg>;
    },
    componentDidMount: function() {
        d3.select(this.getDOMNode())
            .call(chart(this.props));
    },
    shouldComponentUpdate: function(props) {
        d3.select(this.getDOMNode())
            .call(chart(props));
        return false;
    }
});

주목해야 할 중요한 점은 shouldComponentUpdate() 항상 false 반환하므로 React는 초기 렌더링 후에 DOM의 해당 부분을 건드리지 않습니다.

d3 호출을 렌더링 코드 호출로 대체 할 수 있어야합니다.

mindjuice 에 2015년 07월 23일

👍4

모든 3 댓글

다음은 기사의 코드입니다.

React.createClass({
    render: function() {
        return <svg></svg>;
    },
    componentDidMount: function() {
        d3.select(this.getDOMNode())
            .call(chart(this.props));
    },
    shouldComponentUpdate: function(props) {
        d3.select(this.getDOMNode())
            .call(chart(props));
        return false;
    }
});

주목해야 할 중요한 점은 shouldComponentUpdate() 항상 false 반환하므로 React는 초기 렌더링 후에 DOM의 해당 부분을 건드리지 않습니다.

d3 호출을 렌더링 코드 호출로 대체 할 수 있어야합니다.

mindjuice 에 2015년 07월 23일

👍4

@mindjuice 정말 감사합니다. 이것은 확실히 나를 도왔습니다. 덧붙여서 저는이 질문의 저자 인 rui-infotrack입니다. 이전에 회사 계정을 사용하고 있었는데 ...

ktei 에 2015년 07월 23일

마감하겠습니다. 필요한 Redux에 대한 추가 정보가 있으면 알려주세요.

gaearon 에 2015년 07월 31일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Redux: 그래서 html5 canvas로 redux 거래를 사용하는 방법

가장 유용한 댓글

모든 3 댓글

관련 문제