当前位置: 首页 > article >正文

【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>
  );
}

http://www.kler.cn/a/528497.html

相关文章:

  • BW AO/工作簿权限配置
  • 51单片机开发:温度传感器
  • vue2项目(一)
  • C++编程语言:抽象机制:模板(Bjarne Stroustrup)
  • 单细胞-第四节 多样本数据分析,下游画图
  • < OS 有关 > 阿里云 几个小时前 使用密钥替换 SSH 密码认证后, 发现主机正在被“攻击” 分析与应对
  • 2 Flink 部署及启动
  • 基于Python的简单企业维修管理系统的设计与实现
  • TypeScript 运算符
  • 【毕业与课程大作业参考】基于 yolov8+pyqt5 界面自适应的表情识别检测系统 demo
  • Java中对消息序列化和反序列化并且加入到Spring消息容器中
  • 语音识别播报人工智能分类垃圾桶(论文+源码)
  • 使用HttpClient和HttpRequest发送HTTP请求
  • 软件工程中的需求工程
  • 电脑优化大师-解决电脑卡顿问题
  • FFmpeg(7.1版本)编译:Ubuntu18.04交叉编译到ARM
  • Scratch 《像素战场》系列综合游戏:像素战场游戏Ⅰ~Ⅲ 介绍
  • 深入理解linux中的文件(上)
  • C++——缺省参数、函数重载、引用、inline
  • 海外问卷调查之渠道查,对企业经营的重要价值有哪些表现
  • 3.5.5 基于横盘结构的分析体系——缠论(走势类型)
  • abc 390 D(暴搜 复杂度用 bell数 证明 n 的集合的划分方法的数目)
  • [EAI-027] RDT-1B,目前最大的用于机器人双臂操作的机器人基础模型
  • 牛客网 除2!(详解)c++
  • JavaScript 入门教程
  • BW AO/工作簿权限配置