比connect更好用的redux hooks，useSelector以及useDispatch

用过redux的都知道connect,但是每次我们用这个的时候是不是要写一堆代码，

如下，

// const mapStateToProps = state => ({
    
    
//     banner: state.recommend.banner
// })
// const mapPropsToProp = dispatch => ({
    
    
//     getBanner: (url)=>{dispatch(getBannerAction(url))}
// // // })
// // export default connect(mapStateToProps,mapPropsToProp)(memo(MHDiscover))

而且导出的时候，还要用connect包裹，特别麻烦。

推荐redux hook来实现我们对redux数据的获取以及修改更加方便，

先看代码
在这里插入图片描述

const dispatch = useDispatch();
  const recommend = useSelector(
    (state) => ({
    
    
      banner: state.recommend.banner,
    }),
    shallowEqual
  );

useSelector,跟我们的mapStateToProps效果类似，都是用来获取state的数据，但是更加方便简洁。
他传入两个参数，第一个就是一个函数，如图中的state,返回一个对象，对象里面可以通过state获取到redux的数据。第二个值实际上是性能优化，用于决定组件是否重新渲染。
每次修改redux的数据，useSelector会默认对前后两个对象进行比较，比如图中的{banner},尽管你没有修改这个数据，但是还是会返回新的{banner},那么useSelector就会对这两个对象进行比较，怎么比较呢，就直接===，也就是两个对象得一摸一样，才不用引起组建的重新渲染，
可以看下源码
在这里插入图片描述
默认传入了refEuqality，这个是啥呢，

简单粗暴。
但我们知道，两个对象即使看起来一样，但是他们的堆地址并不相同，所以全等比较的时候肯定不相等，那么第二个参数的作用就此诞生，通过react-redux提供给我们的shallowEqual(一个用于比较的函数，react内部有实现，就是通过他来比较conncet的对象以此决定是否重新渲染，那么react-redux也给我们提供一个类似的函数，)将shallowEquall作为第二个参数传入，useSelector就会通过这个函数来进行比较，此函数进行的是浅比较（有兴趣可以了解源码）,这样useSelector才是真正的发挥出来作用。

useDispatch，顾名思义，就是用来dispatch action的，这个使用即可，效果与conncet一样。

还可以通过useSotre获取整个Store对象。
const Store = useStore()