Redux: Então, como usar redux lidar com tela html5

Criado em 21 jul. 2015 · 3Comentários · Fonte: reduxjs/redux

Oi, eu tenho um projeto que tem uma área de tela e renderizo o gráfico (ou seja, nós + bordas) em um dos 3 layouts estáticos nele. Digamos que em outro componente (talvez uma barra topnav), o usuário clica em um botão e deve acionar a tela para animar esses nós e arestas, movendo-os para alterá-los para outro layout entre os 3.

Então, meu problema é: neste cenário, aparentemente o estado não será muito útil para renderizar a tela porque esse é o trabalho de desenhar o contexto. No entanto, a tela ainda tem seu "estado", que é seu parâmetro de layout, mas não quero que o React atualize o elemento HTML da tela depois que state.layout for alterado porque, como eu disse, é o trabalho de desenhar contexto (e eu perco a animação se eu fizer isso, porque é uma re-renderização do elemento HTML, não da tela). Portanto, a única coisa que preciso aqui é o despacho entre os componentes via Actions.

Mas no Flux (o mesmo para Redux), espera-se que mude de estado para acionar a re-renderização da IU e a IU é baseada no próprio estado. Na tela, as ações ainda devem acionar a mudança de estado, mas a IU (tela) é renderizada por redesenho.

Estou perguntando isso porque apenas metade do meu projeto usa canvas, e há muitos componentes que são puramente renderizados pelo React (sim, estou usando o React, mas não o padrão Flux). Eu não gosto do Flux porque é um pouco "over-engineered" na minha opinião. Então eu encontrei esse Redux, que só reduz a parte que eu não gostava do Flux. Mesmo assim, tenho esse problema com o canvas, e não tenho certeza se é aconselhável usar Redux ou não.

Você poderia me dar algumas dicas ou um pequeno trecho de código para ajudar? Ou se você acha que não é adequado usar Redux no projeto que mencionei acima, por favor, me diga também.

Obrigado um milhão!

PS Eu assisti seu vídeo no youtube (sobre aquele react hot loader + discurso Redux). Brilhante.

question

Fonte

rui-ktei

👍1

Comentários muito úteis

Se bem entendi, este é essencialmente o mesmo problema que encontrei recentemente ao integrar o D3 com o React. Eu precisava criar a tag <svg> e renderizar meu estado e, em seguida, conforme o estado mudasse, iniciar animações d3, adicionar novos elementos, remover elementos, etc.

Este artigo StackOverflow fornece uma explicação de como fazer com que o React renderize seu elemento <svg> pela primeira vez (ou no seu caso <canvas> , e então faça com que o React mantenha seus dedinhos sujos longe dele, enquanto ainda dando a você a chance de redesenhar as coisas quando o estado muda:

Aqui está o código do artigo:

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;
    }
});

O principal a ser observado é que shouldComponentUpdate() sempre retorna false , então o React nunca tocará aquela parte do DOM após a renderização inicial.

Você deve ser capaz de apenas substituir as chamadas d3 por chamadas para seu código de renderização.

mindjuice em 23 jul. 2015

👍4

Todos 3 comentários

Aqui está o código do artigo:

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;
    }
});

O principal a ser observado é que shouldComponentUpdate() sempre retorna false , então o React nunca tocará aquela parte do DOM após a renderização inicial.

Você deve ser capaz de apenas substituir as chamadas d3 por chamadas para seu código de renderização.

mindjuice em 23 jul. 2015

👍4

@mindjuice Muito obrigado. Isso definitivamente me ajudou. Já agora, sou o rui-infotrack, o autor desta pergunta. Eu estava usando a conta da empresa anteriormente ...