useSelector
useSelector(selector: Function)
allows a user to pick a single "Field" from the form state using a selector function.
Example
function Counter() {const [counter, setCounter] = useSelector(state => state.counter)return <span>{counter}</span>}
The Counter component will re-render on changes.
IMPORTANT: Multiple field-selections within the same selector function are not allowed.
// BAD 👎const [counter, setCounter] = useSelector(state => ({ counter1 : state.counter1, counter2 : state.counter2 }));
// OK 👍const [counter1, setCounter1] = useSelector(state => state.counter1);const [counter2, setCounter2] = useSelector(state => state.counter2);
Arguments
selector
: function
Returns
helpers
: array
An array that holds the value of the field and a function to update it.
const [valueField, setFieldValue] = useSelector(state => state.anyprop);
The setFieldValue function is used to update the field value.
It accepts as an argument:
a function which will receive the previous value and return an updated value.
const [valueField, setFieldValue] = useSelector(state => state.anyprop);setFieldValue(prev => ++prev);a new field value.
const [valueField, setFieldValue] = useSelector(state => state.anyprop);setFieldValue(newValue);
Basic usage
import{ Form, Input } from 'usetheform'
- {} 0 keys
const CounterReader = () => {const [counter, setCounterValue] = useSelector(state => state.counter);return (<div><span>{counter}</span><button type="button" onClick={() => setCounterValue(0)}>Reset Counter</button></div>);}