import React from 'react' ; import useLocalStore , { StoreActions } from '../../dist' ; import DebounceView from './DebounceView' ; type State = { value : string ; validationMessage : string ; validationMessageDebounced : string ; calls : number ; callsDebounced : number ; } ; type Actions = { onChange : ( value : string ) => void ; validate : ( ) => void ; } ; export type DebounceViewProps = State & Actions ; const getInitialState = ( ) : State => ( { validationMessage : '' , validationMessageDebounced : '' , value : '' , calls : 0 , callsDebounced : 0 , } ) ; const validate = ( v ) => ( v . length > 10 ? 'Greater than 10 characters' : 'Lower  than 10 characters' ) ; const debounceActions = { onChange : { effects : ( { s , args : [ value ] } ) => ( { ... s , value , calls : s . calls + 1 } ) , debounceSideEffectsTimeout : 500 , sideEffects : ( { actions } ) => { actions . validate ( ) ; } , } , validate : ( { s } ) => ( { ... s , validationMessage : validate ( s . value ) , callsDebounced : s . callsDebounced + 1 , } ) , } ; export default function Debounce ( ) { const { state , actions } = useLocalStore ( getInitialState , debounceActions , { } ) ; return < DebounceView { ... state } { ... actions } />; }