Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/farwayer/mobx-select
MobX and MobX-State-Tree store selector for using with mobx-react-lite
https://github.com/farwayer/mobx-select
inject mobs-state-tree mobx mobx-react mobx-react-lite observer select selector store
Last synced: about 1 month ago
JSON representation
MobX and MobX-State-Tree store selector for using with mobx-react-lite
- Host: GitHub
- URL: https://github.com/farwayer/mobx-select
- Owner: farwayer
- Created: 2019-09-30T21:51:32.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-04-06T17:01:10.000Z (almost 4 years ago)
- Last Synced: 2024-11-18T15:29:56.495Z (about 2 months ago)
- Topics: inject, mobs-state-tree, mobx, mobx-react, mobx-react-lite, observer, select, selector, store
- Language: JavaScript
- Homepage:
- Size: 872 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
## mobx-select
_MobX and MobX-State-Tree store selectors
(like Redux `mapStateToProps` and `mapDispatchToProps`)
for using with [mobx-react-lite](https://github.com/mobxjs/mobx-react-lite)_
[](https://www.npmjs.com/package/mobx-select)
Lib has no deps and tiny. Its size [limited](https://github.com/ai/size-limit)
to **814 bytes** (minified and gzipped).
## How to use
```bash
yarn add mobx-select
```
**asset.js**
```js
import {select} from 'mobx-select'
function getAsset(app, props) {
const asset = app.assets.get(props.id)
return {asset}
}
function onRemoveAsset(app, prop) {
const {id} = props
const onRemove = useCallback(() => {
app.removeAsset(id)
}, [id])
return {onRemove}
}
export default select(
Asset,
getAsset,
onRemoveAsset,
// ...other
)
function Asset({
asset = {},
onRemove,
}) {
return (
{asset.name}
Remove
)
}
```
**app.js**
```js
import {StoreProvider} from 'mobx-select'
import Asset from './asset'
// create MobX or MobX-State-Tree store
const app = createStore()
export default function App() {
return (
)
}
```
## Render optimization
If you access nested observable values (MobX objects, maps, arrays) only inside
selectors but not in component you can use `memo` or `PureComponent`
to prevent unnecessary extra renderings.
```js
import {memo} from 'react'
function getAssetTitle(app, props) {
const title = app.assets.get(props.id)?.title
return {title}
}
export default select(
memo(Title),
getAssetTitle,
)
function Title({
title,
}) {
return (
{title}
)
}
```
## Using with non-function components
You can use `select()` with non-function components. But keep in mind that
access to all nested observable values (MobX objects, maps, arrays) inside
component will not be tracked. So you need to get all necessary fields in
selector and pass it as **(!)** scalar values.
Use `warnNonFunction: false` option to hide warning about it. Warning for `memo`
and `PureComponent` will be omitted automatically (assumed that you know what
you're doing).
```js
function getUserId(app) {
const userId = app.userId
return {userId}
}
export default select(
Title,
getAsset,
getUserId,
{warnNonFunction: false})
class Title extends React.Component {
render() {
const {userId, asset} = this.props
// (!) WARN: access to price will not be tracked!
// (!) changing its value will not trigger component re-render
const price = asset?.price
return (
user={userId} {price}
)
}
}
```
## References
References will be automatically passed to components:
```js
function UserName({
name,
}, ref) {
return (
)
}
class UserSignInCount extends React.Component {
render() {
return (
{this.props.count}
)
}
log() {
console.log(this.props.count)
}
}
function App() {
const nameRef = useRef()
const signInCountRef = useRef()
const tadam = useCallback(() => {
nameRef.current.value = "User TADAM!"
signInCountRef.current.log()
})
return (
<>
TADAM!
>
)
}
```