关于 React-Mobx 中动作需求的问题

Question

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

}

现在，我已经为 handleRoll 函数使用了动作装饰器。我使用它是因为我的原始状态已更改，即当我单击掷骰子 button.Now 时，每次（很可能）值都会更改，即使我删除了动作装饰器，但仍然一切正常，没有错误。现在的问题是，如果我们能够完成改变状态的任务，那么为什么还要使用动作呢？

Answer 1

默认情况下，不需要使用操作来更改 mobx 中的状态，但这是[大型代码库中的最佳实践|https://mobx.js.org/refguide/action.html#when-to-use-actions]。如果启用严格模式，如果您尝试在操作之外修改状态，mobx 将抛出错误。

要在 mobx 4.0.0 及更新版本中启用严格模式，请使用 mobx.configure({enforceActions: true})。在旧版本的 mobx 中，这是通过 mobx.useStrict(true).

完成的

关于 React-Mobx 中动作需求的问题

Questions regarding need of actions in React-Mobx

javascript

ecmascript-next

mobx

mobx-react