Как изменить размер, а затем отобразить на холсте с помощью react-redux

Я пишу приложение response-redux и не могу понять, как выполнить рендеринг на холсте после изменения его размера.

По сути, у меня есть два ползунка, которые при изменении обновляют ширину и высоту моего холста. В моем редукторе я могу выполнить рендеринг на холст во время этого обновления состояния. Однако как только холст обретает новые размеры, он очищается.

Итак, что я пытаюсь сделать, так это обновить состояние, а затем, как только React отрендерит новый холст с измененным размером, мне нужно выполнить его рендеринг (желательно в том же редукторе, в котором хранятся размеры холста).

В настоящее время я пытаюсь сделать это с помощью redux-thunk следующим образом:

export const setWidthAndRender = (width) => (dispatch) => {
  dispatch(setWidth(width));

  setTimeout(dispatch(renderToCanvas), 10);
};

Но это не работает. Я хотел бы каким-то образом отправить renderToCanvas, как только я уверен, что он был обработан React.

Любые идеи?


reactjs javascript canvas html react-redux
person Trent Small    schedule 19.04.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы должны добавить в состояние холста новое свойство, например, «newWidth», которое будет истинным, если вам нужно повторно отрисовать холст, и ложным, если вам не нужно.

Ваша функция setWidth должна изменить newWidth на true, чтобы компонент знал, что ваша ширина изменилась при следующем вызове «componentDidUpdate».

componentDidUpdate () должен выглядеть так

componentDidUpdate(){
        let {newWidth} = this.props.canvasProps
        let {renderToCanvas} = this.props.actions;

        if(newWidth === true){
            renderToCanvas(); // Set newWidth to false inside renderToCanvas()
        }
    }

Этот способ должен работать: P

person QoP    schedule 19.04.2016