effector-dom
Advanced tools
Changelog
effector-react 20.0.4
useStore
with lack of store updates triggered by react hooks in children componentsChangelog
effector-react 20.0.3
as const
typescript assertion for useStoreMap
keys. It helps us to infer type for fn
argumentsimport React from 'react'
import {value createStore} from 'effector'
import {value useStoreMap} from 'effector-react'
type User = {
username: string
email: string
bio: string
}
const $users = createStore<User[]>([
{
username: 'alice',
email: 'alice@example.com',
bio: '. . .',
},
{
username: 'bob',
email: 'bob@example.com',
bio: '~/ - /~',
},
{
username: 'carol',
email: 'carol@example.com',
bio: '- - -',
},
])
export const UserProperty = ({id, field}: {id: number; field: keyof User}) => {
const value = useStoreMap({
store: $users,
keys: [id, field] as const,
fn: (users, [id, field]) => users[id][field] || null,
})
return <div>{value}</div>
}
In typescript versions below 3.4, you can still use an explicit type assertion
import React from 'react'
import {value createStore} from 'effector'
import {value useStoreMap} from 'effector-react'
type User = {
username: string
email: string
bio: string
}
const $users = createStore<User[]>([
{
username: 'alice',
email: 'alice@example.com',
bio: '. . .',
},
{
username: 'bob',
email: 'bob@example.com',
bio: '~/ - /~',
},
{
username: 'carol',
email: 'carol@example.com',
bio: '- - -',
},
])
export const UserProperty = ({id, field}: {id: number; field: keyof User}) => {
const value = useStoreMap({
store: $users,
keys: [id, field] as [number, keyof User],
fn: (users, [id, field]) => users[id][field] || null,
})
return <div>{value}</div>
}
as const in typescript docs
Changelog
effector-react 20.0.2
useStore
argument change