Skip to main content

useStoreMap

Function, which subscribes to store and transforms its value with given function. Signal will update only when selector function result will change

Common use case: subscribe to changes in selected part of store only

useStoreMap<State, Result>(
store: Store<State>,
fn: (state: State) => Result
): Accessor<Result>

Arguments

  1. store: Source store
  2. fn ((state) => result): Selector function to receive part of source store

Returns

(Result)

useStoreMap({store, keys, fn, updateFilter?})

Arguments

  1. params (Object): Configuration object
    • store: Source store
    • keys (Array): Will be passed to fn selector
    • fn ((state, keys) => result): Selector function to receive part of source store
    • updateFilter ((newResult, oldResult) => boolean): Optional function used to compare old and new updates to prevent unnecessary rerenders. Uses createStore updateFilter option under the hood

Returns

(Accessor<Result>)

Example#

This hook is very useful for working with lists, especially with large ones

import {createStore} from 'effector'
import {useUnit, useStoreMap} from 'effector-solid'
import {For} from 'solid-js/web'
const data = [
{
id: 1,
name: 'Yung',
},
{
id: 2,
name: 'Lean',
},
{
id: 3,
name: 'Kyoto',
},
{
id: 4,
name: 'Sesh',
},
]
const $users = createStore(data)
const $ids = createStore(data.map(({id}) => id))
const User = ({id}) => {
const user = useStoreMap({
store: $users,
keys: [id],
fn: (users, [userId]) => users.find(({id}) => id === userId),
})
return (
<div>
<strong>[{user().id}]</strong> {user().name}
</div>
)
}
const UserList = () => {
const ids = useUnit($ids)
return (
<For each={ids()}>
{(id) => <User key={id} id={id} />}
</For>
)
}
Last updated on