`useDelValueCallback`

The useDelValueCallback primitive returns a parameterized callback that can be used to remove a single Value from a Store.

useDelValueCallback<Parameter>(
  valueId: MaybeAccessor<string> | GetId<Parameter>,
  storeOrStoreId?: MaybeAccessor<undefined | StoreOrStoreId>,
  then?: (store: Store) => void,
): ParameterizedCallback<Parameter>

	Type	Description
`valueId`	`MaybeAccessor<string> \| GetId<Parameter>`	The `Id` of the `Value` in the `Store` to delete, or a `GetId` function that will return it.
`storeOrStoreId?`	`MaybeAccessor<undefined \| StoreOrStoreId>`	The `Store` to be updated: omit for the default context `Store`, provide an `Id` for a named context `Store`, or provide an explicit reference.
`then?`	`(store: Store) => void`	A function which is called after the deletion, with a reference to the `Store`.
returns	`ParameterizedCallback<Parameter>`	A parameterized callback for subsequent use.

This primitive is useful, for example, when creating an event handler that will delete data in the Store. In this case, the parameter will likely be the event, so that you can use data from it as part of the deletion.

For convenience, you can optionally provide a then function which will be called just after the Store has been updated. This is a useful place to call the addCheckpoint method, for example, if you wish to add the deletion to your application's undo stack.

Example

This example creates the TinyBase objects needed by the Solid primitive or component and calls it from within a reactive root.

import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {useDelValueCallback} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore()
    .setTables({
      pets: {
        fido: {species: 'dog', color: 'brown', next: 'felix'},
        felix: {species: 'cat', color: 'black'},
      },
      species: {dog: {price: 5}, cat: {price: 4}},
    })
    .setValues({open: true});
  const metrics = createMetrics(store).setMetricDefinition(
    'highestPrice',
    'species',
    'max',
    'price',
  );
  const indexes = createIndexes(store).setIndexDefinition(
    'bySpecies',
    'pets',
    'species',
  );
  const relationships = createRelationships(store)
    .setRelationshipDefinition('petSpecies', 'pets', 'species', 'species')
    .setRelationshipDefinition('nextPet', 'pets', 'pets', 'next');
  const queries = createQueries(store).setQueryDefinition(
    'petColors',
    'pets',
    ({select, where, param}) => {
      select('color');
      where((getCell) => getCell('species') == param('species'));
    },
    {species: 'dog'},
  );
  const checkpoints = createCheckpoints(store);
  store.setCell('pets', 'fido', 'color', 'walnut');
  checkpoints.setCheckpoint('updated color');
  metrics.getMetric('highestPrice');
  indexes.getSliceIds('bySpecies');
  relationships.getRemoteRowId('petSpecies', 'fido');
  queries.getResultRowIds('petColors');
  useDelValueCallback('open', store)();
  dispose();
});

Since

v8.3.0