Basic concepts of the MobX for state management with React examples

Link to the Whimsical - https://whimsical.com/mobx-TkdDh6cXeuWZ3XDn38bmFz
Github link to the demo app - https://github.com/Dorogonovvv/mobX-demo

After checking the official documentation (https://mobx.js.org/) I have noted some main ideas that differ from well-known (to me) Redux state management.

The simple demo app includes a timer, a counter, and the Todo app.

- Object-oriented approach;
- MobX is a signal-based state management library;
- To use with React: import { observer } from "mobx-react-lite" // Or "mobx-react".
- Store state in any data structure you like, just make sure that all properties you want to change over time are marked as observable;
- Mutations everywhere!
- Concept (building blocks): state, actions, derivations;
- 2 kinds of derivations: Computed values and Reactions;
- Reactions bridge the worlds of reactive and imperative programming;
- The analogy is a spreadsheet (computations resemble formulas);
- Check principles - https://mobx.js.org/the-gist-of-mobx.html#principles
- makeObservable function or modern decorators like @observable, @computed (https://mobx.js.org/observable-state.html)…
- Data stores: domain and UI stores (https://mobx.js.org/defining-data-stores.html)

Тэги:

#mobx #state_management #react #basics #concepts #integrations #data_storage #typescript #javascript

Скачать видео