mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
1547142125
* add a brief overview to our use of mobx and mark all observable fields as observable in our docs * add to navigation Signed-off-by: Sebastian Malton <sebastian@malton.name>
24 lines
1.5 KiB
Markdown
24 lines
1.5 KiB
Markdown
# Working with mobx
|
|
|
|
## Introduction
|
|
|
|
Lens uses `mobx` as its state manager on top of React's state management system.
|
|
This helps with having a more declarative style of managing state, as opposed to `React`'s native `setState` mechanism.
|
|
You should already have a basic understanding of how `React` handles state ([read here](https://reactjs.org/docs/faq-state.html) for more information).
|
|
However, if you do not, here is a quick overview.
|
|
|
|
- A `React.Component` is generic over both `Props` and `State` (with default empty object types).
|
|
- `Props` should be considered read-only from the point of view of the component and is the mechanism for passing in "arguments" to a component.
|
|
- `State` is a component's internal state and can be read by accessing the parent field `state`.
|
|
- `State` **must** be updated using the `setState` parent method which merges the new data with the old state.
|
|
- `React` does do some optimizations around re-rendering components after quick successions of `setState` calls.
|
|
|
|
## How mobx works:
|
|
|
|
`mobx` is a package that provides an abstraction over `React`'s state management. The three main concepts are:
|
|
- `observable`: data stored in the component's `state`
|
|
- `action`: a function that modifies any `observable` data
|
|
- `computed`: data that is derived from `observable` data but is not actually stored. Think of this as computing `isEmpty` vs an `observable` field called `count`.
|
|
|
|
Further reading is available from `mobx`'s [website](https://mobx.js.org/the-gist-of-mobx.html).
|