如何使用useDispatch useSelector对我们react中的代码进行简化。

 本篇文章基于读者已知道如何使用react中的coonect传统方式对我们store中的数据进行访问。如果您不知道。推荐您阅读这篇文章

mp.csdn.net/mp_blog/cre…

如果我们使用了useDispatch useSelector 那么我们就可以直接在组件的内部直接进行我们的派发请求。并且可以通过useSelector  直接对我们的reducer数据进行访问

import React, { useRef,} from 'react';
import { useDispatch, useSelector } from 'react-redux'
import  {addaction,jianaction,asnycjianaction }    from '../store/actionCreator'
const Count = () => {
  const selectref = useRef()
  const dispatch = useDispatch()
  const { count}=useSelector((state) => {
    return {
      count: state.count
    }
  })
 const   add = () => {
    const value =selectref.current.value
   dispatch(addaction(value * 1))
  }
 const jian = () => {
    const value =selectref.current.value
   dispatch(jianaction(value*1))
  }
  const asnycjian = () => {
    const value = selectref.current.value
    dispatch(asnycjianaction(value*1,1000))
  }
  return (
    <div>
    <select name="" id="" ref={selectref} >
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
      <button onClick={add}>+</button>
      <button onClick={jian}>-</button>
      <button onClick={asnycjian}>异步减</button>
      <h3>当前的数为：{count}</h3>
      </div>
      )
}
export default Count

​