关于React Mobx中行动需求的问题

import React from "react"
import { observable } from "mobx";
import { observer } from "mobx-react"
import { computed, action } from "mobx"

@observer
export default class Dice extends React.Component {

    @observable
    value = 1;

    @computed  
    get result() {
        return this.value > 3 ? "YOU WIN" : "YOU LOSE"
    }

    

    @action    
    handleRoll = () => {

        this.value = Math.floor(Math.random() * 6) + 1
    }

    render() {

        return (
            <div>
                <br />
                <button onClick={this.handleRoll}>Roll Dice</button> <br />
                <p>The value is {this.value}</p>
                <p>{this.result}</p>
            </div>
        )
    }

}