61 lines
1.5 KiB
JavaScript
61 lines
1.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import {
|
|
decrement,
|
|
increment,
|
|
incrementByAmount,
|
|
incrementAsync,
|
|
selectCount,
|
|
} from './counterSlice';
|
|
import styles from './Counter.module.css';
|
|
|
|
export function Counter() {
|
|
const count = useSelector(selectCount);
|
|
const dispatch = useDispatch();
|
|
const [incrementAmount, setIncrementAmount] = useState('2');
|
|
|
|
return (
|
|
<div>
|
|
<div className={styles.row}>
|
|
<button
|
|
className={styles.button}
|
|
aria-label="Increment value"
|
|
onClick={() => dispatch(increment())}
|
|
>
|
|
+
|
|
</button>
|
|
<span className={styles.value}>{count}</span>
|
|
<button
|
|
className={styles.button}
|
|
aria-label="Decrement value"
|
|
onClick={() => dispatch(decrement())}
|
|
>
|
|
-
|
|
</button>
|
|
</div>
|
|
<div className={styles.row}>
|
|
<input
|
|
className={styles.textbox}
|
|
aria-label="Set increment amount"
|
|
value={incrementAmount}
|
|
onChange={e => setIncrementAmount(e.target.value)}
|
|
/>
|
|
<button
|
|
className={styles.button}
|
|
onClick={() =>
|
|
dispatch(incrementByAmount(Number(incrementAmount) || 0))
|
|
}
|
|
>
|
|
Add Amount
|
|
</button>
|
|
<button
|
|
className={styles.asyncButton}
|
|
onClick={() => dispatch(incrementAsync(Number(incrementAmount) || 0))}
|
|
>
|
|
Add Async
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|