import { useStoreMap } from "effector-solid";

Methods

useStoreMap($store, fn)

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

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

Formulae

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

Arguments

1. $store: Source Store<T>
2. fn ((state: T) => Result): Selector function to receive part of source store

Returns

(Result)

Examples

TBD

useStoreMap(config)

Formulae

useStoreMap({
  store: Store<State>,
  keys: any[],
  fn: (state: State, keys: any[]) => Result,
  updateFilter? (newResult, oldResult) => boolean,
}): Result;

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

Examples

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

import { createStore } from "effector";
import { useUnit, useStoreMap } from "effector-solid";
import { For } from "solid-js/web";

const usersRaw = [
  {
    id: 1,
    name: "Yung",
  },
  {
    id: 2,
    name: "Lean",
  },
  {
    id: 3,
    name: "Kyoto",
  },
  {
    id: 4,
    name: "Sesh",
  },
];

const $users = createStore(usersRaw);
const $ids = createStore(usersRaw.map(({ id }) => id));

const User = ({ id }) => {
  const user = useStoreMap({
    store: $users,
    keys: [id],
    fn: (users, [userId]) => users.find(({ id }) => id === userId) ?? null,
  });

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