When using mobx, you can modify state without action,. Why is it emphasized in the tutorials?

when I use mobx with react, I modify the data directly as this.props.store.a = "hello". This is also possible, but the tutorial says it is recommended to use action to modify it. What are the benefits of using action? If you want to write an action to modify a value like me, isn"t it troublesome to write an action for each change?

Javascript
Jun.07,2021

1. Have never even heard of it. I don't know if you've ever used react,. It's possible to directly modify state,this.state.name ='a component in a component, but have you ever done that? Certainly not, because even if you change the state, it will not trigger the re-rendering of react, but will lead to data and view inconsistency. Therefore, the setState api provided by react is used to change the state, so that the rendering cycle of the react can be triggered again.
2.mobx, like redux and state, is just an object for storing data. But mobx and redux are global, and in the final analysis, they are just objects. Of course, if you change it, you can change it, but it just changes it, and it doesn't trigger some actions of mobx and redux. So in this sense, action is like setState, is the way to change the state tree, by calling action to trigger reducer, to change the data tree. This ensures that the mobx or redux works properly and that the data is consistent with the view.
3. Instead of changing a value to write an action, an action corresponds to one thing. Different things correspond to different action, triggers the corresponding reducer, so that mobx or redux can know what action caused what result. The built-in transaction in

can avoid unnecessary multiple renderings caused by multiple observable modifications

Previous: Why String.prototype.__proto__ = = Object.prototype?

Next: Every time you switch a route, a prompt pops up asking if you are sure and how to trigger it globally.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu