Mobx Value

mobx-value is a simple and small data management lib, with it data decouple from component.

The most outstanding of mobx-value is, you do not have to create much structure layer code, as reducer or action or dispatch.

- MobxValue
- Overview
- Installation
- API
- Setter
- Boolean
- Request
- Lazy
- Alias
- SetMobx
- Example
- Work with React
- Hooks
- CDN
- Build doc
- TODO

Overview

If you feel redux(or other libs similar to redux) is reduant, and have strong need of data management out of component. Try this one.

By mobx-value, just create a data by setter(or request or boolean or lazy), use it in a component, wrap the component with observer from mobx-react-lite, it works.

Note: mobx-value only works with Mobx > 6.0.0.

!Statements

!Branches

!Functions

!Lines

Installation

``sh
npm install -S mobx mobx-value
// or yarn
yarn add mobx mobx-value
`

Api

$3

- Example

`typescript
import { setter } from 'mobx-value'

const counter = setter({ value: 1 })
counter.value // 1
counter.set(2)
counter.value // 2
counter.set(n => n + 1) // support function from version 1.5
counter.value // 3
counter.restore()
counter.value // 1

const o = setter({
value: {n: 1},
})
o.merge({ m: 2 }) // add merge method from version 1.7
o.value // { n: 1, m: 2 }
`

- Parameters type MobxSetterOption

`typescript
interface MobxSetterOption {
value: Data,

/**
* mobx makeObservable annotation option for value
* @default observable
/
annotation?: observable | observable.shallow
| observable.struct | observable.deep
| observable.ref | true

/**
* auto run restore when leave observer context
* @default false
/
autoRestoreOnBecomeUnobserved?: boolean

/**
* alias of autoRestoreOnBecomeUnobserved
* @default false
* added version 1.8.0
/
autoRestore?: boolean

/**
* mobx debug name
/
name?: string // support from version 1.6
}
`

- Return type MobxSetterValue

`typescript
interface MobxSetterValue {
value: Data
set: (v: Data | ((current: Data) => Data)) => void
restore: () => void
/* only works when value is an object, shallow merge properties /
merge: (v: Record) => void
}
`

$3

Extends from setter, is a specifically for bool value.

- Example

`typescript
import { boolean } from 'mobx-value'

const modal = boolean()
modal.value // false
modal.setTrue() // true
modal.setFalse // false
modal.toggle() // true
modal.restore() // false
`

- Parameters type MobxBooleanOption

`typescript
interface MobxBooleanOption {
/**
* @default false
*/
value?: boolean,

/**
* auto run restore when leave observer context
* @default false
/
autoRestoreOnBecomeUnobserved?: boolean

/**
* alias of autoRestoreOnBecomeUnobserved
* @default false
* added version 1.8.0
/
autoRestore?: boolean

/**
* mobx debug name
/
name?: string
}
`

- Return type MobxBooleanValue

`typescript
interface MobxBooleanValue {
value: boolean
set: (v: boolean | ((current: boolean) => boolean)) => void
restore: () => void
setTrue: () => void
setFalse: () => void
toggle: () => void
}
`

$3

Extends from setter, all setter properties are available.

- Example

`typescript
import { request } from 'mobx-value'

const user = request({
value: { name: '' },
request: () => Promise.resolve({ name: 'abc' }),
})

user.value.name // ''
user.loading // false
await user.request() // when requesting, user.loading is true
user.loading // false
user.value.name // 'abc'
user.restore()
user.value.name // ''

user.request()
user.cancel() // cancel last request

// only request once
user.request() // auto debounce
user.request() // when last request not complete
user.request() // new request will be debounced
`

- Parameters type MobxRequestOption

`typescript
interface MobxRequestOption {
value: Data,
annotation?: observable | observable.shallow
| observable.struct | observable.deep
| observable.ref | true
request: (args?: any) => Promise

/**
* set to true, prevent next request when loading, default false
*/
parallel?: boolean

/**
* auto run restore when leave observer context
* @default false
/
autoRestoreOnBecomeUnobserved?: boolean

/**
* alias of autoRestoreOnBecomeUnobserved
* @default false
* added version 1.8.0
/
autoRestore?: boolean

/**
* auto cancle request when not observed and loading is not complete
* @default false
/
autoCancelOnBecomeUnobserved?: boolean

/**
* mobx debug name
/
name?: string
}
`

- Return type MobxRequestValue

`typescript
interface MobxRequestValue Promise> {
value: Data
set: (v: Data | ((current: Data) => Data)) => void
restore: () => void
request: (...args: Parameters) => CancellablePromise
// cancel request only when loading status
cancel: () => void
loading: boolean
/**
* request again with last parameters
*/
refresh: () => CancellablePromise
/* get last call args /
getLastArgs: () => any[]
}
`

$3

extends from request, all request properties are available.

- Example

`typescript
import { lazy } from 'mobx-value'

const user = lazy({ value: { name: '' }, request: () => Promise.resolve({ name: 'abc' })})

// Notice，the lazy value must be in observer context, such as autorun, reaction
// outside observer context, use lazy value will not trigger request
autorun(() => {
console.log(user.value.name)
})

user.loading // default false, true when requesting data
user.restore()
user.value.name // ''
`

- Parameters type MobxLazyOption, same with MobxRequestOption

`typescript
interface MobxLazyOption {
value: Data,
annotation?: observable | observable.shallow
| observable.struct | observable.deep
| observable.ref | true
request: (args?: any) => Promise

/**
* request default prevent next request when last request is loading
* set to true to allow next request when loading
* @default false
/
parallel?: boolean

/**
* auto run restore when leave observer context
* @default false
/
autoRestoreOnBecomeUnobserved?: boolean

/**
* alias of autoRestoreOnBecomeUnobserved
* @default false
* added version 1.8.0
/
autoRestore?: boolean

/**
* auto cancle request when not observed and loading is not complete
* @default false
/
autoCancelOnBecomeUnobserved?: boolean

/**
* mobx debug name
/
name?: string
}
`

- Return type MobxLazyValue

`typescript
interface MobxLazyValue {
value: Data
set: (v: Data | ((current: Data) => Data)) => void
restore: () => void
request: (...args: Parameters) => CancellablePromise
cancel: () => void
loading: boolean

/**
* status tag, do not modify it
* @readonly
*/
requested: boolean
cancel(): void

/**
* last request ready promise
* when need some operate after this data is loaded
* use await lazy.ready
*/
ready: Promise
refresh(): void

/**
* restore value also reset all request status to initial
* when next time it enter mobx observer context
* it will request again
/
reset(): void
}
`

$3

At early version, the export method is mobxSetter, mobxBoolean, mobxRequest and mobxLazy.

From v1.1, add short alias setter, boolean, request and lazy.

$3

From v1.4.2, add setMobx to set mobx instance for mobx-value.

When there are more than one mobx instances work togather. Use this can manually set which should be used by mobx-value.

`typescript
import * as otherVersionMobx from 'mobx-v60'
import { setMobx } from 'mobx-value'

setMobx(otherVersionMobx)

`

Example

A good example is a better doc.

This repo source code also includes examples.

Play it with the following steps.

`sh
git clone https://github.com/superwf/mobx-value.git
cd mobx-value
yarn
yarn start
`

$3

To work with React, use observer in mobx-react-lite with React component.

`typescript
import { observer } from 'mobx-react-lite'
import type { FC } from 'react'
import { render } from 'react-dom'
import { setter } from 'mobx-value'

const counter = setter({
value: 1,
})

export const Example: FC = observer(() => (


render(, document.querySelector('#app'))
`

$3

Use useMobxValue instead wrap component with observer.

`typescript
import type { FC } from 'react'
import { render } from 'react-dom'
import { setter, useMobxValue } from 'mobx-value'

const counter = setter({
value: 1,
})

export const Example: FC = () => {
const n = useMobxValue(counter)
return

render(, document.querySelector('#app'))
`

CDN

- Use mobx-value by from cdn, Global variable name is window.mobxValue

`

Build doc

BUILD.md

TODO

Something to be inproved in future.

- [] add delay time for loading debounce.