redux-hooks的使用

redux-hooks的使用

useDispatch

我们在项目中不再使用繁琐的connect函数了，而是借助于redux-hoos的useDispatch来直接dispatch，而不再需要connect的mapStateToDispatch了。

useSelector

由于我们不再使用connect函数的mapStateToprops了，因此我们需要借助于useSelector来获取到请求回来的数据。

接受两个参数：

​ 参数一：它会接受你所想要返回的数据。

​ 参数二：shallowEqual在不使用第二个参数的情况下，它很可能会影响到我们的性能，因为在使用connect函数时，它的内部其实是有做一个浅拷贝的即父组件的重新渲染并不会每次都引起子组件的重新渲染除非子组件所依赖的数据也发生了变化。

源码如下：

export function useSelector<TState = DefaultRootState, TSelected = unknown>(
    selector: (state: TState) => TSelected,
    equalityFn?: (left: TSelected, right: TSelected) => boolean
): TSelected;

const refEquality = (a, b) => a === b//默认做的是一个引用的全等比较，因此必然会引起重复渲染

因此我们建议在使用时加上shallowEqual这个参数从而可以进行一个浅层的比较，避免组件的多次重新渲染。

const { topBanners } = useSelector(state => ({
    //因为使用了immutable.js，因此当然要使用get
    // topBanners: state.get("recommend").get("topBanners")
    //当然了如果嫌弃上面这样写麻烦的话也可以使用下面这种写法也是可以滴
    topBanners: state.getIn(["recommend", "topBanners"])
}), shallowEqual)

除以上两个外，redux也是有useReduxContext和useStore这两个hooks。