Redux Hook 使用方法

新公司学习阶段，代码大多数是使用redux来做状态管理，并且使用Hooks。虽然之前了解，但是没有在实际项目中使用过。写一个小的Demo 供大家参考。

React Redux在19年6月11日发不了的7.1版中提供了对Hooks的支持（之前大多是使用一个redux-react-hook来做）。这我们就可以不使用高阶HOC的方式了。

具体什么是Hook我就不介绍了，不懂的请自行查看react官方文档。

react-redux 提供了两个Hook用来替代connect。

useSelector

useSelector是连接mapStateToProps的替代方法。向其传递了一个函数，该函数使用Redux的存储状态并返回所需的状态。

useDispatch

useDispatch替换connect的mapDispatchToProps。它所做的只是返回store的dispatch方法，因此我们可以手动调用dispatch。

直接一个对比的demo更明显

类组件Connect

import React from "react";
import { connect } from "react-redux";
import { addCount } from "./store/counter/actions";
export const Demo = ({ count, addCount }) => {
  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={addCount}>Count</button>
    </div>
  );
};

const mapStateToProps = state => ({
  count: state.counter.count
});
const mapDispatchToProps = { addCount };

// content 链接
export default connect(mapStateToProps, mapDispatchToProps)(Demo);

Hooks组件

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { addCount } from './store/counter/actions'

export const Demo = () => {
  const count = useSelector(state => state.counter.count)
  const dispatch = useDispatch()

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={() => dispatch(addCount())}>Count</button>
    </div>
  )
}

可见Hooks的写法还是特别简洁的。