Reset input state
Extending input state with set-input-state
event is not enough when some input field should be removed from input.
set-input-state
only extends existing input, this means that when we have input {first_name: "John"}
and we extend it with {last_name: "Doe"}
we get {first_name: "John", last_name: "Doe"}
. However reset-input-state
fully overwrites whole input state with event payload, meaning in previous example we get {last_name: "Doe"}
as final input state.
Useful use case for this is to save and reset input state in flow. This snippet saves state when user gets to "claim-modules"
screen. And resets input value whenever input.data.module
state value changes.
export function customService(kasko) {
let savedInput;
function routeChangedHandler({ current }) {
if (current?.path !== 'claim-modules') {
return;
}
// Save current input state
savedInput = kasko.getState('input');
// Stop listening after input is saved
kasko.removeEventListener('route-changed', routeChangedHandler);
}
kasko.addEventListener('route-changed', routeChangedHandler);
kasko.addEventListener(
'state-changed',
(module) => {
if (!module) {
return;
}
if (savedInput) {
kasko.dispatchEvent('reset-state-input', {
module,
...savedInput,
});
}
// Do some extra logic or events
},
{ slice: 'input.data.module' },
);
}
Last updated