react-redux中使用hook写法进行状态管理

注意：在react18中，取消了ReactDOM渲染根页面，采用createRoot api进行渲染，用法如下：

老用法：
// ReactDOM.render(
//     <App />   ,
//   document.getElementById('root')
// );
新用法：
const root = createRoot(document.getElementById('root'));
root.render(<Provider store={store}><App /></Provider>);

action和reducer都是正常写法，无需更改

hook省去了connect函数，不过Provider还是需要正常编写，如上文：

<Provider store={store}><App /></Provider>

引入两个hook api

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

以前繁琐的mapStateToProps函数改为useSelector hook就可以获取redux中数据，用法如下：

const count = useSelector(state=>state.count)

如果需要获取多个redux中数据，可以使用解构赋值

const {count,test}= useSelector(state=>state)

mapDispatchToProps改为useDispatch，用法如下：

const dispatch = useDispatch()

//dispatch中为需要提交的action，此处increment是封装的action，
//onclick中不可直接写带括号的函数，否则点击事件获得的是函数返回值，所以采用回调函数式调用
<button onClick={()=>dispatch(increment(1))}>+</button>

注意：定义的所有的action的type都不能重复，否则会同时dispatch