之前使用 redux，都是通过 connect 这个高阶组件函数来实现的。后来觉得那一套太过繁琐，所以使用 Context 来进行全局状态管理。今天有朋友给我推荐了另一种新的 redux 状态管理的方式：useSelector 和 useSelector

老的 connect 写法

import { connect, ConnectedProps } from 'react-redux'

interface RootState {
  isOn: boolean
}

const mapState = (state: RootState) => ({
  isOn: state.isOn
})

const mapDispatch = {
  toggleOn: () => ({ type: 'TOGGLE_IS_ON' })
}

const connector = connect(mapState, mapDispatch)

// The inferred type will look like:
// {isOn: boolean, toggleOn: () => void}
type PropsFromRedux = ConnectedProps<typeof connector>

type Props = PropsFromRedux & {
  backgroundColor: string
}

const MyComponent = (props: Props) => (
  <div style={{ backgroundColor: props.backgroundColor }}>
    <button onClick={props.toggleOn}>
      Toggle is {props.isOn ? 'ON' : 'OFF'}
    </button>
  </div>
)

export default connector(MyComponent)

新的 hook 写法

interface  RootState  {
  isOn:  boolean
}

// TS infers type: (state: RootState) => boolean
const  selectIsOn  =  (state: RootState)  => state.isOn

// TS infers `isOn` is boolean
const isOn =  useSelector(selectIsOn)

const dispatch =  useDispatch()

最后

不用写一堆繁琐的 connect、mapState、mapDispatch 了，直接使用 hook 函数对 redux 全局数据进行操作。舒服多了~