hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

remove non-working example since the work to make it work hasn't even started yet

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2020-11-24 10:20:41 -05:00
parent 974f4b21fa
commit 1ae1c7ddbb
1 changed files with 5 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
docs/extensions/guides/working-with-mobx.md
View File

@ -7,11 +7,11 @@ This helps with having a more declarative style of managing state, as opposed to
You should already have a basic understanding of how `React` handles state ([read here](https://reactjs.org/docs/faq-state.html) for more information). 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. 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). - 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. - `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` 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. - `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. - `React` does do some optimizations around re-rendering components after quick successions of `setState` calls.
## How mobx works: ## How mobx works:
@ -21,64 +21,3 @@ A `React.Component` is generic over both `Props` and `State` (with default empty
- `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`. - `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). Further reading is available from `mobx`'s [website](https://mobx.js.org/the-gist-of-mobx.html).
## Basic usage of mobx:
When using `Lens`'s extension's API, some of the provided types are marked as `observable` and are documented as such.
These can be used as normal types and the combination of `mobx` and `react` work to determine when a rerender should occur.
---
## Example:
Imagine that your extension wants to conditionally add an app menu if some other observable value is ever `true` (and remove it when it is `false`).
That could be achieved using roughly the following code:
```typescript
import { LensMainExtension, MenuRegistration } from "@k8slens/extensions";
import observables from "./observables" // a collection of observable data
import { IReactionDisposer } from "mobx";
interface MenuRegistrationWithId extends MenuRegistration {
id?: string;
}
export default class ExtensionMain extends LensMainExtension {
menuReactionDispose?: IReactionDisposer;
appMenus: MenuRegistrationWithId[] = [
{
parentId: "file",
label: strings.extension.appMenu["label"](),
click() {
console.log("you clicked the label menu")
},
},
];
onActivate() {
this.menuReactionDispose = reaction(
() => observables.clusterIsInState,
clusterIsInState => {
if (clusterIsInState) {
this.appMenus.push({
parentId: "file",
label: "Remove from current state",
click() {
console.log("currently does nothing, removing...")
},
id: "clusterIsInState",
})
} else {
this.appMenus = this.appMenus.filter(m => x.id !== "clusterIsInState")
}
}
)
}
onDeactivate() {
this.menuReactionDispose?.() // always clenaup mobx disposers
this.menuReactionDispose = undefined
}
}
```