Effector

Effector

  • Docs
  • Try
  • API
  • Blog
  • Twitter
  • GitHub

›effector-react

effector

  • API Reference
  • Event
  • Store
  • Effect
  • Domain
  • createStore
  • createEvent
  • createEffect
  • createDomain
  • createStoreObject
  • combine
  • restore
  • createApi
  • clearNode
  • merge
  • split
  • sample
  • guard
  • forward
  • fromObservable

effector-react

  • API Reference
  • useStore
  • useStoreMap
  • useList
  • createComponent
  • Gate
  • createGate
  • useGate
  • createStoreConsumer

effector-vue

  • API Reference
  • VueEffector
  • ComponentOptions
  • Vue
Edit

useStoreMap({ store, keys, fn })

Creates hook function, which observes changes in selected part of store. Component will be updated only when selector function result will changed.

Arguments

  1. params (Object): Configuration object
    • store (Store): Source store
    • keys (Array): This argument will be passed to React.useMemo to avoid unnecessary updates
    • fn ((store, keys) => result): Selector function to receive part of source store

Returns

(State)

Example

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

import React from 'react'
import ReactDOM from 'react-dom'
import {createStore} from 'effector'
import {createComponent, useStoreMap} from 'effector-react'

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 = createComponent($ids, (_, ids) =>
  ids.map(id => <User key={id} id={id} />),
)

ReactDOM.render(<UserList />, document.getElementById('root'))
← useStoreuseList →
Effector
Docs
Getting StartedAPI Reference
Community
User ShowcaseStack OverflowGitterTwitter
More
GitHubStar
Copyright © 2019 zerobias