Using the type-safe redux store in a component

App.tsx

import * as React from "react";
import { SampleActionType, useSelector, useDispatch } from "../store";

function IncrBtn(props: { value: number }) {
  const incr = useDispatch(SampleActionType.IncrementNum);
  //incr has type (payload: {by: number}) => void
  return (
    <p>
      <button onClick={() => incr({ by: props.value })}>Incr by {props.value}</button>
    </p>
  );
}

export function App() {
  const curNum = useSelector(s => s.sample.num);
  const decr = useDispatch(SampleActionType.DecrementNum);
  //decr has type () => void
  return (
    <div>
      <p>Current {curNum}</p>
      <IncrBtn value={2} />
      <IncrBtn value={4} />
      <button onClick={decr}>Decr</button>
    </div>
  );
}