Redux with TypeScript

更好的寫法處理 react-redux 提供的 custom hook 型別定義 useSelector & useDispatch

  // 沒有特別處理的話，每次用到 useSelector 都要給 (state: RootState)，若沒有給的話，TS 會報錯
  // Error：'state' is of type 'unknown'.ts(18046)
  const count = useSelector(state => state.counter.value)
  // 解法
  const count = useSelector((state: RootState) => state.counter.value)


  // 可以用成 Pre-typed
  import { useDispatch, useSelector } from "react-redux"
  import type { RootState } from "./store"

  type AppDispatch = AppStore["dispatch"]

  // 以 useAppDispatch、useAppSelector 取代 useDispatch、useSelector
  export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
  export const useAppSelector = useSelector.withTypes<RootState>()