PIXI js text moving on redux state update

Question

I made an element in my game class:

private winAmountText: PIXI.Text = new PIXI.Text('0')

I have below code in my constructor:

this.winAmountText.style = new PIXI.TextStyle({
    fill: 0xFFFFFF,
    fontSize: 86
})
this.setWinAmountText(0)
store.subscribe(() =>
    this.setWinAmountText(store.getState().winAmount)
)

and this is my function:

private setWinAmountText(value: number) {
    this.winAmountText.text = value.toString()
    this.winAmountText.x = this.width * 0.56 - this.winAmountText.width
    this.winAmountText.y = this.height * 0.905
}

when I open my page the win amount text is placed correctly. But when the state updates, the win amount moves to left top corner.

How can I fix this?

Answer 1

Fixed it: I had to wrap them in:

requestAnimationFrame(() => {})

so it looks like this:

private setWinAmountText(value: number) {
    this.winAmountText.text = value.toString()
    requestAnimationFrame(() => {
        this.winAmountText.x = this.width * 2.4 - this.winAmountText.width
        this.winAmountText.y = this.height * 3.88
    })
}