【react-redux】react-redux中的 useDispatch和useSelector的使用与原理解析

一、useSelector

首先，useSelector的作用是获取redux store中的数据。
下面就是源码，感觉它的定义就是首先是createSelectorHook这个方法先获得到redux的上下文对象。
然后从上下文对象中获取store数据。然后从store中得到选择的数据。


2、useDispatch
这个其实就是将dispatch绑定到redux上下文中的store上。

所以这也是为什么能够实现store中数据变化能重新渲染，因为，Provider标签下的数据发生了变化。
useSelector选择数据，useDispatch发生变化。

三、useSelector和useDispatch的使用

这里store是index.js中Provider标签中定义的store。

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  decrement,
  increment,
  incrementByAmount,
} from "../features/counter/counterSlice";
import store, { useAppSelector } from "../app/store";
 
export default function TestRedux() {
  const count1 = useSelector((state: IRootType) => state.counter.value);   //获取store中的值
  //  处理action
  const dispatch = useDispatch();   //得到相应store中的dispatch
  const [amount, setAmount] = useState(1);
  return (
    <div>
      <h2>测试redux页面</h2>
      <br />
      <br />
          
      <button onClick={() => dispatch(increment())}>Increment</button>
         <span>{count}</span>   
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <br />
         
      <input
        type="text"
        value={amount}
        onChange={(e) => {
          setAmount(parseInt(e.target.value));
        }}
      />
         
      <button onClick={() => dispatch(incrementByAmount(amount))}>
        Decrement
      </button>
    </div>
  );
}