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

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

Returns

(Result)

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

Arguments

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>
  )
}