Wie kann ich die Größe ändern, dann auf eine Leinwand mit react-redux rendern

Question

Ich schreibe eine React-Redux-App und kann nicht herausfinden, wie auf einer Leinwand gerendert wird, sobald es in der Größe geändert wurde.

Grundsätzlich habe ich zwei Schieberegler, die, wenn geändert, die Breite und die Höhe meiner Leinwand aktualisieren. In meinem Reduzierer kann ich während dieser Statusaktualisierung auf der Arbeitsfläche rendern. Sobald das Canvas jedoch seine neuen Dimensionen erhält, wird es gelöscht.

Also, was ich versuche, ist der Zustand zu aktualisieren, dann, sobald React den neu bemessenen Canvas gerendert hat, muss ich dazu Rendern (vorzugsweise im gleichen Reduzierer mit den Canvas-Dimensionen).

Derzeit bin ich versucht, dies mit redux-Thunk wie dies zu tun:

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

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

Dies, obwohl nicht funktioniert. Ich möchte renderToCanvas irgendwie versenden, sobald ich sicher bin, dass es von React gerendert wurde.

Irgendwelche Ideen?

Answer 1

Sie müssen Ihrem Canvas-Status eine neue Eigenschaft hinzufügen, z. B. "newWidth", die wahr ist, wenn Sie Ihre Leinwand erneut rendern müssen, und false, wenn Sie nicht müssen.

Ihre Funktion setWidth sollte newWidth in true ändern, damit die Komponente weiß, dass sich Ihre Breite beim nächsten Aufruf von "componentDidUpdate" geändert hat.

componentDidUpdate() sollte wie folgt aussehen

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

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

Auf diese Weise sollte funktionieren: P