diff options
Diffstat (limited to 'src/features/counter/Counter.jsx')
-rw-r--r-- | src/features/counter/Counter.jsx | 63 |
1 files changed, 12 insertions, 51 deletions
diff --git a/src/features/counter/Counter.jsx b/src/features/counter/Counter.jsx index 37d866d..d589bf9 100644 --- a/src/features/counter/Counter.jsx +++ b/src/features/counter/Counter.jsx @@ -1,67 +1,28 @@ -import React, { useState } from "react"; -import { useSelector, useDispatch } from "react-redux"; -import { - decrement, - increment, - incrementByAmount, - incrementAsync, - incrementIfOdd, - selectCount, -} from "./counterSlice"; -import styles from "./Counter.module.css"; +import React from 'react' +import { useSelector, useDispatch } from 'react-redux' +import { decrement, increment } from './counterSlice' export function Counter() { - const count = useSelector(selectCount); - const dispatch = useDispatch(); - const [incrementAmount, setIncrementAmount] = useState("2"); - - const incrementValue = Number(incrementAmount) || 0; + const count = useSelector((state) => state.counter.value) + const dispatch = useDispatch() return ( <div> - <div className={styles.row}> - <button - className={styles.button} - aria-label="Decrement value" - onClick={() => dispatch(decrement())} - > - - - </button> - <span className={styles.value}>{count}</span> + <div> <button - className={styles.button} aria-label="Increment value" onClick={() => dispatch(increment())} > - + + Increment </button> - </div> - <div className={styles.row}> - <input - className={styles.textbox} - aria-label="Set increment amount" - value={incrementAmount} - onChange={(e) => setIncrementAmount(e.target.value)} - /> + <span>{count}</span> <button - className={styles.button} - onClick={() => dispatch(incrementByAmount(incrementValue))} - > - Add Amount - </button> - <button - className={styles.asyncButton} - onClick={() => dispatch(incrementAsync(incrementValue))} - > - Add Async - </button> - <button - className={styles.button} - onClick={() => dispatch(incrementIfOdd(incrementValue))} + aria-label="Decrement value" + onClick={() => dispatch(decrement())} > - Add If Odd + Decrement </button> </div> </div> - ); + ) } |