Selector own props

[ghalex]

I know you can use $store.map to select part of a store but what if I need to select a part of a store using a parameter. Example:

const $data = createStore({"alex": {age: 20, name: "Alex}, "john": {age: 30, name: "John"}})

if I have and cont id = "alex" in a component somewhere is there a use to select only alex data and get the update if that is changing ?

Using reselect I could do something like:

const getVisibilityFilter = (state, props) => state.todoLists[props.listId].visibilityFilter

[goodmind]

const Component = createComponent(
  props => $data.map(list => list[props.id]), 
  (props, state) => {
    return <div />
  }
)

[ghalex]

Thanky you @goodmind for the answer, this will do it.

But can you do this using hooks. I connect my stores using useStore($data)

[Laiff]

@ghalex You can use Gate and combine to cache value

const OwnGate = createGate();

const DataSlice = combine(
  SomeStoreWithData, 
  OwnGate.state, 
  (data, props) => selectSliceFromData(state, props)
)

const SomeComponent = (props) => {
  useGate(OwnGate, props);
  return <InnerComponent />
}

const InnerComponent = () => {
  const dataSlice = useStore(DataSlice);

  return <div>{dataSlice}</div>
}

May be it should work in one component too.

[ghalex]

Hi @Laiff, thx for the replay but I think I found the solution myself, I will posted here if someone else is searching for something like this:

const Component = ({ id }: Props) => {
  const user = useStore(store.$currentUser);
  const company = useStore(store.$all.map(all => all.find(c => c.id === id)));
  // here I have the company selected from the $all store, and it works if $all store changes
}

and this is using hook useStore

[Laiff]

@ghalex Nice solution, but does it recalculate stored value on changing props?

[zerobias]

Yes, it is

[zerobias]

we have a solution for this issue, will be published in next release of effector-react

https://github.com/zerobias/effector/blob/master/src/react/useStore.js#L26
https://github.com/zerobias/effector/blob/master/src/react/__tests__/useStore.test.js#L44

const Component = ({id}) => {
  const user = useStoreMap({
    store: users,
    keys: [id],
    fn: (users, [id]) => users[id],
  })
}

const users = createStore({
  alex: {age: 20, name: "Alex"},
  john: {age: 30, name: "John"},
})

It can be used for your own hooks

const readUserAge = id => useStoreMap({
  store: users,
  keys: [id],
  fn: (users, [id]) => users[id].age,
})

const UserAge = ({id}) => {
  const age = readUserAge(id)
}

In this example UserAge will be rerendered only when user's age is changed

[zerobias]

Also maybe it makes sense to add alternative syntax, similar with official hooks.

const Component = ({id}) => {
  const user = useStoreMap(users$, (users, [id]) => {
    return users[id]
  }, [id])
}

const users$ = createStore({
  alex: {age: 20, name: "Alex"},
  john: {age: 30, name: "John"},
})

[zerobias]

Method useStoreMap published in effector-react@19.1.1. (No alternative syntax yet)