aboutsummaryrefslogtreecommitdiff
path: root/src/features/counter/Counter.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/features/counter/Counter.jsx')
-rw-r--r--src/features/counter/Counter.jsx63
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>
- );
+ )
}