usedispatch和useselector

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

• useSelector 替代 mapStateToProps，从store中提取state数据
• useDispatch 替代 mapDispatchToProps，从store中获取dispatch方法的引用

1. useSelector : 读取redux的state的数据

要注意的是必须在函数组件中使用，因为底层是hooks实现的

import { useSelector} from "react-redux";

const mapStateToProps = (state,props) => {
    console.log("ComBState",state);
    return {count: state.count};
}
// 函数组件c想使用redux中的数据  只需要将定义好的方法传进useSelector就可以了，上面定义的方法和使用connect方法加强时需要定义的mapStateToProps 完全一致
function ComC() {
    const {count} = useSelector(mapStateToProps);
    return <div>{ count }</div>
}

2. useDispatch : 修改redux的state的数据

useDispatch使用更加简单，会返回dispatch方法，使用返回的dispatch方法去发送对应的action就可以了。

import { useDispatch } from "react-redux";

function ComD() {
    const dispatch = useDispatch();
    return <div>
        <button onClick={ ()=>{dispatch({type: "addCount", count: 10})}} >change</button>
    </div>
}