addRowListener
The addRowListener
method registers a listener function with the Store
that will be called whenever data in a Row
changes.
addRowListener(
tableId: IdOrNull,
rowId: IdOrNull,
listener: RowListener<Store>,
mutator?: boolean,
): string
Type | Description | |
---|---|---|
tableId | IdOrNull | |
rowId | IdOrNull | |
listener | RowListener<Store> | The function that will be called whenever data in the matching |
mutator? | boolean | An optional boolean that indicates that the listener mutates |
returns | string | A unique |
The provided listener is a RowListener
function, and will be called with a reference to the Store
, the Id
of the Table
that changed, the Id
of the Row
that changed, and a GetCellChange
function in case you need to inspect any changes that occurred.
You can either listen to a single Row
(by specifying the Table
Id
and Row
Id
as the method's first two parameters) or changes to any Row
(by providing null
wildcards).
Both, either, or neither of the tableId
and rowId
parameters can be wildcarded with null
. You can listen to a specific Row
in a specific Table
, any Row
in a specific Table
, a specific Row
in any Table
, or any Row
in any Table
.
Use the optional mutator parameter to indicate that there is code in the listener that will mutate Store
data. If set to false
(or omitted), such mutations will be silently ignored. All relevant mutator listeners (with this flag set to true
) are called before any non-mutator listeners (since the latter may become relevant due to changes made in the former). The changes made by mutator listeners do not fire other mutating listeners, though they will fire non-mutator listeners.
Examples
This example registers a listener that responds to any changes to a specific Row
.
import {createStore} from 'tinybase';
const store = createStore().setTables({
pets: {fido: {species: 'dog', color: 'brown'}},
});
const listenerId = store.addRowListener(
'pets',
'fido',
(store, tableId, rowId, getCellChange) => {
console.log('fido row in pets table changed');
console.log(getCellChange('pets', 'fido', 'color'));
},
);
store.setCell('pets', 'fido', 'color', 'walnut');
// -> 'fido row in pets table changed'
// -> [true, 'brown', 'walnut']
store.delListener(listenerId);
This example registers a listener that responds to any changes to any Row
.
import {createStore} from 'tinybase';
const store = createStore().setTables({
pets: {fido: {species: 'dog', color: 'brown'}},
});
const listenerId = store.addRowListener(
null,
null,
(store, tableId, rowId) => {
console.log(`${rowId} row in ${tableId} table changed`);
},
);
store.setCell('pets', 'fido', 'color', 'walnut');
// -> 'fido row in pets table changed'
store.setTable('species', {dog: {price: 5}});
// -> 'dog row in species table changed'
store.delListener(listenerId);
This example registers a listener that responds to any changes to a specific Row
, and which also mutates the Store
itself.
import {createStore} from 'tinybase';
const store = createStore().setTables({
pets: {fido: {species: 'dog', color: 'brown'}},
});
const listenerId = store.addRowListener(
'pets',
'fido',
(store, tableId, rowId) =>
store.setCell('meta', 'update', `${tableId}_${rowId}`, true),
true,
);
store.delCell('pets', 'fido', 'color');
console.log(store.getTable('meta'));
// -> {update: {pets_fido: true}}
store.delListener(listenerId);
Since
v1.0.0