Redux Fundamentals

Hooking It Up With React – Exercise: Adding SetCounter

Redux Fundamentals Videos ▶️ 

Exercise: Adding SetCounter

We have a component that we're not using: SetCounter. Let's pop it into our application.

export const Counter = () => {
  const incident = "Incident";
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <main className="Counter">
      <h1>Days Since Last {incident}</h1>
      <p className="count">{count}</p>
      <section className="controls">
        <button onClick={() => dispatch(increment())}>Increment</button>
        <button onClick={() => dispatch(set(0))}>Reset</button>
        <button onClick={() => dispatch(decrement())}>Decrement</button>
      </section>
      <SetCounter /> {/* 🌝 */}
    </main>
  );
};

Can you wire it up to make it dispatch the correct actions?

Tasting note: You might want to use some regular ol' React component state to hold onto the temporary value that we want to set the count to before we hit the submit button.