从 Redux7.1 开始，官方为 redux-react 提供了相关的 Hooks (opens new window)，自此我们可以不用编写 connect 及其对应的映射函数了

提示

  类组件中是不能使用 Hooks 的

--- connect 替代

  -useSelector 可以将 state 映射到组件中。

  -useDispatch 可以直接获取到 store 的 dispatch 函数。

类组件中（以前）

import { connect } from 'react-redux'
import { countChangeAction } from '../store/actionCreators.js'

class Demo extends React.PureComponent {
  //
  upDownHandle(str) {
    this.props.countChange(str)
  }

  //
  render() {
    const { count } = this.props

    return (
      <div>
        <p>Demo couter: {count}</p>
        <button onClick={(e) => this.upDownHandle('+1')}>+1</button>
        <button onClick={(e) => this.upDownHandle('+3')}>+3</button>
      </div>
    )
  }
}

// ==============

// 1、state映射
const mapStateToProps = (state) => ({
  count: state.counter
})

// 2、dispatch映射
const mapDispatchToProps = (dispatch) => ({
  countChange: function (str) {
    dispatch(countChangeAction(str))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Demo)

函数式组件中（以前）

import { connect } from 'react-redux'
import { countChangeAction } from '../store/actionCreators.js'

const Demo = memo((props) => {
  const { count, countChange } = props
  //
  function upDownHandle(str) {
    countChange(str)
  }

  //
  return (
    <div>
      <p>Demo couter: {count}</p>
      <button onClick={upDownHandle('+1')}>+1</button>
      <button onClick={upDownHandle('+3')}>+3</button>
    </div>
  )
})

// ==============

// 1、state映射
const mapStateToProps = (state) => ({
  count: state.counter
})

// 2、dispatch映射
const mapDispatchToProps = (dispatch) => ({
  countChange: function (str) {
    dispatch(countChangeAction(str))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Demo)

  改用 Hooks 方式：

import { useSelector, useDispatch } from 'react-redux'
import { countChangeAction } from '../store/actionCreators.js'

const Demo = memo((props) => {
  //
  // 1、state映射
  const { count } = useSelector((state) => ({
    count: state.counter
  }))

  // 2、dispatch映射
  const { dispatch } = useDispatch()

  function upDownHandle(str) {
    dispatch(countChangeAction(str))
  }

  //
  return (
    <div>
      <p>app couter: {count}</p>
    </div>
  )
})

export default Demo

--- shallowEqual 优化

  useSelector 默认监听的是整个 store 中的 state。当当前组件的某个 state 发生改变的时候，所涉及的相关组件都会被重新渲染，尽管其内部的 state 并没有受到影响。

这里的 shallowEqual 的作用类似于 react 中的 Hook：useCallback()，其内部会进行浅层比较

import { useSelector, useDispatch, shallowEqual } from 'react-redux'

const Demo = memo((props) => {
  //
  const { count } = useSelector(
    (state) => ({
      count: state.counter
    }),
    shallowEqual
  )

  //
  return (
    <div>
      <p>app couter: {count}</p>
    </div>
  )
})

export default Demo