Redux: Итак, как использовать редукцию с холстом html5

Созданный на 21 июл. 2015 · 3Комментарии · Источник: reduxjs/redux

Привет, у меня есть проект, в котором есть область холста, и я визуализирую граф (т.е. узлы + края) в одном из трех статических макетов на нем. Скажем, на другом компоненте (может быть, на верхней панели навигации) пользователь нажимает кнопку, и он должен запускать холст, чтобы анимировать эти узлы и края, перемещая их, чтобы изменить их на другой макет из 3.

Итак, моя проблема: в этом сценарии, по-видимому, состояние не будет слишком полезным для рендеринга холста, потому что это работа по рисованию контекста. Однако холст по-прежнему имеет свое «состояние», которое является параметром его макета, но я не хочу, чтобы React обновлял элемент холста HTML после изменения state.layout потому что, как я уже сказал, это работа по рисованию контекст (и я теряю анимацию, если это сделаю, потому что это повторный рендеринг HTML-элемента, а не холста). Поэтому единственное, что мне здесь нужно, - это диспетчеризация между компонентами через Действия.

Но в Flux (то же самое для Redux) ожидается изменение состояния для запуска повторного рендеринга пользовательского интерфейса, а пользовательский интерфейс основан на самом состоянии. В холсте ожидается, что действия будут запускать изменение состояния, но пользовательский интерфейс (холст) визуализируется путем повторного рисования.

Я спрашиваю об этом, потому что только половина моего проекта использует холст, и есть много компонентов, которые визуализируются исключительно React (да, я использую React, но не использую шаблон Flux). Мне не нравится Flux, потому что он, на мой взгляд, немного «перестроен». Затем я нашел этот Redux, который просто уменьшает то, что мне не нравится в Flux. Но все же у меня есть проблема с холстом, и я не уверен, стоит ли использовать Redux или нет.

Не могли бы вы дать мне несколько советов или небольшой фрагмент кода в помощь? Или, если вы считаете, что использовать Redux в упомянутом выше проекте неуместно, сообщите мне и об этом.

Бесконечно благодарен!

PS Я смотрел ваше видео на youtube (по поводу того, что реагирует на горячий загрузчик + речь Redux). Блестяще.

question

Источник

rui-ktei

👍1

Самый полезный комментарий

Если я правильно вас понял, это, по сути, та же проблема, с которой я недавно столкнулся при интеграции D3 с React. Мне нужно было создать начальный тег <svg> и отобразить мое состояние, а затем, когда состояние изменилось, запустить анимацию d3, добавить новые элементы, удалить элементы и т. Д.

В этой статье на StackOverflow объясняется, как заставить React визуализировать ваш элемент <svg> в первый раз (или, в вашем случае, <canvas> , а затем пусть React убирает с него грязные мизинцы, пока все еще дает вам возможность перерисовать вещи при изменении состояния:

Вот код из статьи:

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 23 июл. 2015

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

У вас должна быть возможность просто заменить вызовы d3 вызовами вашего кода рендеринга.

mindjuice 23 июл. 2015

👍4

@mindjuice Большое спасибо. Это мне определенно помогло. Кстати, я руи-инфотрек, автор этого вопроса. Раньше я пользовался аккаунтом компании ...