import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { increment, decrement, reset } from './counterSlice'; import './counter.css'; // Optional if you want to add CSS styling function Counter() { // Step 1: Get the current counter value from the Redux store const count = useSelector((state) => state.counter.value); // Step 2: Set up dispatch to send actions to the store const dispatch = useDispatch(); return ( <div style="{{"> <h1>Counter: {count}</h1> <button> dispatch(increment())}>Increment</button> <button> dispatch(decrement())}>Decrement</button> <button> dispatch(reset())}>Reset</button> </div> ); } export default Counter;