react-redux@7.1用于hooks的API

2023-10-26

React-redux 7.1发版啦。

因为在新的项目中用到了hooks,但是用的时候react-redux还处于alpha.x版本的状态。用不了最新的API,感觉不是很美妙。好在,这两天发布了7.1版本。

现在来看看怎么用这个新的API。

useSelector()

const result : any = useSelector(selector : Function, equalityFn? : Function)

这个是干啥的呢?就是从redux的store对象中提取数据(state)。

注意: 因为这个可能在任何时候执行多次,所以你要保持这个selector是一个纯函数。

这个selector方法类似于之前的connect的mapStateToProps参数的概念。并且useSelector会订阅store, 当action被dispatched的时候,会运行selector。

当然,仅仅是概念和mapStateToProps相似,但是肯定有不同的地方,看看selector和mapStateToProps的一些差异:

  • selector会返回任何值作为结果,并不仅仅是对象了。然后这个selector返回的结果,就会作为useSelector的返回结果。
  • 当action被dispatched的时候,useSelector()将对前一个selector结果值和当前结果值进行浅比较。如果不同,那么就会被re-render。 反之亦然。
  • selector不会接收ownProps参数,但是,可以通过闭包(下面有示例)或使用柯里化selector来使用props。
  • 使用记忆(memoizing) selector时必须格外小心(下面有示例)。
  • useSelector()默认使用===(严格相等)进行相等性检查,而不是浅相等(==)。

你可能在一个组件内调用useSelector多次,但是对useSelector()的每个调用都会创建redux store的单个订阅。由于react-reduxv7版本使用的react的批量(batching)更新行为,造成同个组件中,多次useSelector返回的值只会re-render一次。

相等比较和更新

当函数组件渲染时,会调用提供的selector函数,并且从useSelector返回其结果。(如果selector运行且没有更改,则会返回缓存的结果)。

上面有说到,只当对比结果不同的时候会被re-render。从v7.1.0-alpha.5开始,默认比较是严格比较(===)。这点于connect的时候不同,connect使用的是浅比较。这对如何使用useSelector()有几个影响。

使用mapState,所有单个属性都在组合对象中返回。返回的对象是否是新的引用并不重要 - connect()只比较各个字段。使用useSelector就不行了,默认情况下是,如果每次返回一个新对象将始终进行强制re-render。如果要从store中获取多个值,那你可以这样做:

  • useSelector()调用多次,每次返回一个字段值。

  • 使用Reselect或类似的库创建一个记忆化(memoized) selector,它在一个对象中返回多个值,但只在其中一个值发生更改时才返回一个新对象。

  • 使用react-redux 提供的shallowEqual函数作为useSelectorequalityFn参数。

就像下面这样:

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

// later
const selectedData = useSelector(selectorReturningObject, shallowEqual)

useSelector 例子

上面做了一些基本的阐述,下面该用一些例子来加深理解。

基本用法

import React from 'react'
import {
    useSelector } from 'react-redux'

export const CounterComponent = () => {
   
  const counter = useSelector(state => state.counter)
  return <div>{
   counter}</div>
}

通过闭包使用props来确定要提取的内容:

import React from 'react'
import {
    useSelector } from 'react-redux'

export const TodoListItem = props => {
   
  const todo = useSelector(state => state.todos[props.id])
  return
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react-redux@7.1用于hooks的API 的相关文章

随机推荐

  • 三.树莓派4B-无线登录

    无线登录 无线登录是指通过树莓派的SSH服务连接树莓派 这种方式最常用 SSH服务开启后 就相当于串口登录时配置config txt和cmdline txt文件一样 使得系统数据往wifi模块进行发送 再由软件接收 呈现系统终端界面 SSH
  • 如何使用Anaconda创建python3.9环境

    如何使用Anaconda创建python3 9环境 首先查看python版本 然后退出 你可以输入conda h查看基本的语法 下面进行创建仓库 即输入conda create 创建一个新的环境要给它一个名字 你可以用 n 表示你后面要起的
  • 微信小程序发布上线全流程(注册/开发/上传审核)

    以下是微信小程序发布上线的详细流程 确认小程序信息 在微信公众平台注册并登录后 进入小程序管理后台 在 开发 gt 开发设置 中填写小程序基本信息和配置 包括小程序名称 图标设计 类目选择等 此外 需要在小程序管理后台中配置小程序服务类目和
  • c++如何求任意多边形的面积

    由于项目需要 求解任意不规则多边形的面积 想了很久 也不知道怎么叙述 直接代码展示吧 include
  • vue中使用canvas添加各类水印

    vue使用canvas绘制文字水印背景 1 写watermarker js文件 水印添加方法 const setWatermark str1 str2 gt const id 1 23452384164 123412415 if docum
  • 老毛桃电脑重装linux系统,如何简单快速用U盘装Win10系统,小白也能变装系统达人...

    原标题 如何简单快速用U盘装Win10系统 小白也能变装系统达人 飚王出品 必属精品 电脑作为家庭必备 虽然大部分时候都不需要我们自己装系统 但万一遇到电脑中毒系统崩溃或者买回一台笔记本预装linux系统但想换Win10 除了花钱找人装外
  • 数据挖掘技术的来源、历史、研究内容及常用技术

    数据挖掘技术的来源 历史 研究内容及常用技术 1 数据挖掘技术的由来 1 1网络之后的下一个技术热点 我们现在已经生活在一个网络化的时代 通信 计算机和网络技术正改变着整个人类和社会 如果用芯片集成度来衡量微电子技术 用CPU处理速度来衡量
  • 第18章_JDK8-17新特性(上)

    文章目录 第18章 JDK8 17新特性 上 本章专题与脉络 1 Java版本迭代概述 1 1 发布特点 小步快跑 快速迭代 1 2 名词解释 名词解释 Oracle JDK和Open JDK 名词解释 JEP 名词解释 LTS 1 3 各
  • 数字孪生-第二章、数字孪生技术

    第二章 数字孪生技术 2 1 数字孪生的相关领域 想要厘清数字孪生技术的内涵和体系架构 就需要数字如下10个部分的数字孪生的相关领域 2 1 1 数字孪生与计算机辅助设计 计算机辅助设计 Computer Aided Design CAD
  • 万元礼品奖池 玩转「Lighthouse」有奖征文来袭

    疫情之下 居家办公的你被远程会议邀请吵醒 孩子正在网课课堂中跟老师斗智斗勇 家人们在直播间里频频下单 这一切都在说明 我们已经进入了一个 万物皆可在云上 的时代 轻量应用服务器Lighthouse作为新一代开箱即用 面向轻量应用场景的云服务
  • 微信小程序Demo 优惠券展示 / 领取 / 赠送 / 口令优惠券

    前言 本教程是基于 apifm wxapi 模块 教你快速实现小程序开发 所以你可能需要先了解以下知识点 创建 HelloWorld 项目 使用 apifm wxapi 快速开发小程序 免费注册开通后台 获得专属域名 功能说明 后台发布优惠
  • Python2的安装

    Python2的安装 介绍 Python2 是当前 Python 开发的主流版本 是课程学习内容之一 安装 打开安装包 选择安装方式 选择安装路径 修改安装内容 修改后的效果 等待安装结束 安装结束 进入安装路径 复制python为pyth
  • 计算,条件[5993] 将找到的值乘以 2

    public class Solution 提前定义辅助数组大小 private const int AUX SIZE 1001 public int FindFinalValue int nums int ori 辅助数组 int aux
  • brute force/BF 暴力法查找子字符串

    暴力匹配算法 BF法就是brute force暴力法 就是在主串里面一个一个字符向后移去查找是否存在需要查找的子字符串 如果用暴力匹配的思路 并假设现在文本串S匹配到 i 位置 模式串P匹配到 j 位置 则有 如果当前字符匹配成功 即S i
  • QT 等待对话框/进度--

    用QT的 加载的一张gif图片 记录下来以后免得忘记 cpp view plain copy ifndef DIALOG H define DIALOG H include
  • gcc的基本用法及命令

    1 gcc E hello c 仅仅是预处理 即对代码中以 开头进行预处理 其他的地方没有改变 执行完后信息打印在终端 如果需要用文件存放 则应该在命令的后面加上重定向 既是 gt gt hello i 后缀必须为 i的文件 因为这个命令生
  • qt设置渐变色

    概述 此文只作为设置渐变色的一种方式 QDialog ImDialog background color qlineargradient x1 0 y1 0 x2 1 y2 1 stop 0 0e1d2e stop 1 141824 以上为
  • 从2013.7.8的项目会议看近期学习方向

    目前实验室学习的东西有 1 首先对于某些成品需要了解 对其代码等也要做深入的分析 看看人家是如何实现的代表是Lustre GPFS Ceph三种 2 热点问题 所谓热点问题 其实就是如何处理负载均衡的问题 也就是选择一个可以使系统更充分的利
  • 问题解决:VS Code环境调试多文件C++程序

    在VS code环境下默认可以调试单文件的C 程序 只要按调试按钮 环境自动编译该文件 并进入调试模式 如果一个程序由多个文件组成 则无法对直接进行调试 会出现编译不通过的错误 主要原因为调试工具默认只对当前文件进行编译 所以程序由多文件组
  • react-redux@7.1用于hooks的API

    React redux 7 1发版啦 因为在新的项目中用到了hooks 但是用的时候react redux还处于alpha x版本的状态 用不了最新的API 感觉不是很美妙 好在 这两天发布了7 1版本 现在来看看怎么用这个新的API us