React+TS使用Redux的时候一次定义store的类型，不用重复定义类型

1.

2.

// store/index.ts

import { configureStore } from '@reduxjs/toolkit'
import { useSelector, TypedUseSelectorHook } from 'react-redux'

import counterReducer from './modules/counter'

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
})

type GetStateFnType = typeof store.getState
export type IRootState = ReturnType<GetStateFnType>
// useAppSelector的hook
export const useAppSelector: TypedUseSelectorHook<IRootState> = useSelector

export default store

3.在组件中使用

// App.tsx
import React, { Suspense } from 'react'
import { useRoutes, Link } from 'react-router-dom'
import { shallowEqual } from 'react-redux'
import routes from './router'
import Download from './views/download'
import { useAppSelector } from './store'
// import { IRootState } from './store'

// import store from './store'

// type GetStateFnType = typeof store.getState
// type IRootState = ReturnType<GetStateFnType>

function App() {
  // const { count, message } = useSelector(
  //   (state: IRootState) => ({
  //     count: state.counter.count,
  //     message: state.counter.message
  //   }),
  //   shallowEqual
  // )

  const { count, message } = useAppSelector(
    (state) => ({
      count: state.counter.count,
      message: state.counter.message
    }),
    shallowEqual
  )
  return (
    <div className="App">
      <div className="nav">
        <Link to="/discover">发现音乐</Link>
        <Link to="/mine">我的音乐</Link>
        <Link to="/focus">关注</Link>
        <Link to="/download">下载客户端</Link>
      </div>
      <h2>当前计数：{count}</h2>
      <h2>当前消息:{message}</h2>
      <Suspense fallback="">
        <div className="main">{useRoutes(routes)}</div>
      </Suspense>
    </div>
  )
}

export default App

题外话：被注释掉的内容也是可以使用的，不过在组件中就要重复使用注释的内容，并且删除掉store/index.ts中

type GetStateFnType = typeof store.getState

export type IRootState = ReturnType<GetStateFnType>

// useAppSelector的hook

export const useAppSelector: TypedUseSelectorHook<IRootState> = useSelector

这一段内容。