【React】Redux基本使用

什么情况使用 Redux ?

Redux 适用于多交互、多数据源的场景。简单理解就是复杂

从组件角度去考虑的话,当我们有以下的应用场景时,我们可以尝试采用 Redux 来实现

某个组件的状态需要共享时
一个组件需要改变其他组件的状态时
一个组件需要改变全局的状态时
下面这张图,将纯 React 和 采用 Redux 的区别体现了出来
在这里插入图片描述

Redux 三个核心概念

store

store 是 Redux 的核心,可以理解为是 Redux 的数据中台,我们可以将任何我们想要存放的数据放在 store 中,在我们需要使用这些数据时,我们可以从中取出相应的数据。因此我们需要先创建一个 store ,在 Redux 中可以使用 createStore API 来创建一个 store

在生产中,我们需要在 src 目录下的 redux 文件夹中新增一个 store.js 文件,在这个文件中,创建一个 store 对象,并暴露它

因此我们需要从 redux 中暴露两个方法

import {createStore,applyMiddleware
} from 'redux'

并引入为组件服务的 reducer,这里我们叫count组件,所以叫count_reducer

 import countReducer from './count_reducer'

最后调用 createStore 方法来暴露 store

export default createStore(countReducer)
内置方法

在 store 对象下有一些常用的内置方法

获取当前时刻的 store ,我们可以采用 getStore 方法

const state = store.getState();

在前面我们的流程图中,我们需要通过 store 中的 dispatch 方法来派生一个 action 对象给 store

store.dispatch(`action对象`)

最后还有一个 subscribe 方法,这个方法可以帮助我们订阅 store 的改变,只要 store 发生改变,这个方法的回调就会执行

为了监听数据的更新,我们可以将 subscribe 方法绑定在组件挂载完毕生命周期函数上,但是这样,当我们的组件数量很多时,会比较的麻烦,因此我们可以直接将 subscribe 函数用来监听整个 App组件的变化

store.subscribe(() => {ReactDOM.render( < App /> , document.getElementById('root'))
})

action

action 是 store 中唯一的数据来源,一般来说,我们会通过调用 store.dispatch 将 action 传到 store

我们需要传递的 action 是一个对象,它必须要有一个 type 值

例如,这里我们暴露了一个用于返回一个 action 对象的方法

export const createIncrementAction = data => ({type: INCREMENT,data
})

我们调用它时,会返回一个 action 对象

reducer

在 Reducer 中,我们需要指定状态的操作类型,要做怎样的数据更新,因此这个类型是必要的。

reducer 会根据 action 的指示,对 state 进行对应的操作,然后返回操作后的 state

如下,我们对接收的 action 中传来的 type 进行判断

export default function countReducer(preState = initState, action) {const {type,data} = action;switch (type) {case INCREMENT:return preState + datacase DECREMENT:return preState - datadefault:return preState}
}

更改数据,返回新的状态

Redux 的工作流程

在这里插入图片描述
图的解释:首先组件会在 Redux 中派发一个 action 方法,通过调用 store.dispatch 方法,将 action 对象派发给 store ,当 store 接收到 action 对象时,会将先前的 state 与传来的 action 一同发送给 reducer ,reducer 在接收到数据后,进行数据的更改,返回一个新的状态给 store ,最后由 store 更改 state

Redux 三大原则

理解好 Redux 有助于我们更好的理解接下来的 React -Redux

第一个原则

单向数据流:整个 Redux 中,数据流向是单向的

UI 组件 —> action —> store —> reducer —> store

第二个原则

state 只读:在 Redux 中不能通过直接改变 state ,来控制状态的改变,如果想要改变 state ,则需要触发一次 action。通过 action 执行 reducer

第三个原则

纯函数执行:每一个reducer 都是一个纯函数,不会有任何副作用,返回是一个新的 state,state 改变会触发 store 中的 subscribe

节选自 React-Redux 基本使用.md

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/142758.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jupyter lab常用插件集合

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

bazel build使用【未完】

1. install install的作用&#xff1a;将生成的目标、文件复制到指定的安装目录中&#xff0c;可以是可执行文件、库文件、 配置文件等 若有一个c可执行文件&#xff0c;可以使用install将其安装到标准的可执行路径中&#xff0c;以便于直接运行&#xff0c;而无需指定完整的文…

不使用宝塔面板 安装 EasyImage 简单图床

发布于 2023-07-17 在 https://chenhaotian.top/linux-app/easy-image/ 前言 如果不希望安装宝塔面板或其国际版 aapanel&#xff08;尽管宝塔面板可以在安装后关闭&#xff09;&#xff0c;那么可以参考这篇文章。 本文安装环境为 Debian 11, 在 Ubuntu 20.04 测试通过 安…

3D Gaussian Splatting文件的压缩【3D高斯泼溅】

在上一篇文章中&#xff0c;我开始研究高斯泼溅&#xff08;3DGS&#xff1a;3D Gaussian Splatting&#xff09;。 它的问题之一是数据集并不小。 渲染图看起来不错。 但“自行车”、“卡车”、“花园”数据集分别是一个 1.42GB、0.59GB、1.35GB 的 PLY 文件。 它们几乎按原样…

Java实现DXF文件转换成PDF

代码实现 public static void dxfToPdf(){// 加载DXF文件String inputFile "input.dxf";CadImage cadImage (CadImage) Image.load(inputFile);// 设置PDF输出选项PdfOptions pdfOptions new PdfOptions();pdfOptions.setPageWidth(200);pdfOptions.setPageHeigh…

【React】Antd 组件基本使用

Antd 组件基本使用 第一步 安装并引入 antd 包 使用命令下载这个组件库 yarn add antd在我们需要使用的文件下引入&#xff0c;我这里是在 App.jsx 内引入 import { Button } from antd现在我们可以在 App 中使用 Button 组件 <div>App..<Button type"prima…

flink 8081 web页面无法被局域网内其他机器访问

实现 http://localhost:8081/#/overview 可以被局域网其他机器访问

20.2 设备树中的 platform 驱动编写

一、设备树下的 platform 驱动 platform 驱动框架分为总线、设备和驱动&#xff0c;总线不需要我们去管理&#xff0c;这个是 Linux 内核提供。在有了设备树的前提下&#xff0c;我们只需要实现 platform_driver 即可。 1. 修改 pinctrl-stm32.c 文件 先复习一下 pinctrl 子系…

机器学习基础之《回归与聚类算法(6)—模型保存与加载》

一、背景 现在我们预测每次都要重新运行一遍模型。完整的流程应该是不断调整阈值重复计算。 当训练或者计算好一个模型之后&#xff0c;那么如果别人需要我们提供结果预测&#xff0c;就需要保存模型&#xff08;主要是保存算法的参数&#xff09;。 二、sklearn模型的保存和…

突破职场竞争,引领未来发展:考取《研发效能(DevOps)工程师职业技术认证》

就业形势堪忧&#xff0c;什么最有保障&#xff1f;考个“国家级”证书傍身吧&#xff01; 工信部教考中心作为中国领先的行业技能认证机构&#xff0c;其颁发的认证证书不仅代表了个人在信息技术领域的专业能力&#xff0c;更可以录入工业和信息化技术技能人才数据库&#xf…

Spark通过三种方式创建DataFrame

通过toDF方法创建DataFrame 通过toDF的方法创建 集合rdd中元素类型是样例类的时候&#xff0c;转成DataFrame之后列名默认是属性名集合rdd中元素类型是元组的时候&#xff0c;转成DataFrame之后列名默认就是_N集合rdd中元素类型是元组/样例类的时候&#xff0c;转成DataFrame…

TSINGSEE视频汇聚管理与AI算法视频质量检测方案

一、建设背景 随着互联网视频技术的发展&#xff0c;视频监管在辅助安全生产、管理等方面发挥了不可替代的作用。但是&#xff0c;在监管场景中&#xff0c;仍然存在视频掉线、视频人为遮挡、视频录像存储时长不足等问题&#xff0c;对企业的日常管理和运转存在较大的安全隐患…

echarts 图表文字大小自适应 字体大小自适应

将文字大小自适应方法挂载到全局 //main.js Vue.prototype.fontSize function(res) {// 获取视口宽度const clientWidth window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;if (!clientWidth) return; // 如果获取不到视口宽度&#xf…

华为Hcia-数通学习(更改策略)

方法&#xff1a;书籍视频题目训练 书籍&#xff1a;华为HCNA网络技术学习指南。 视频&#xff1a;网络工程师学习路线_哔哩哔哩_bilibili 有过一点基础。考软考网络工程师的时候做了大量笔记&#xff0c;回去复习了一遍。现在准备找工作了&#xff0c;开始学习华为认证的网…

软件测试/测试开发丨​利用人工智能ChatGPT批量生成测试数据

点此获取更多相关资料 简介 测试数据是指一组专注于为测试服务的数据&#xff0c;既可以作为功能的输入去验证输出&#xff0c;也可以去触发各类异常场景。 测试数据的设计尤为重要&#xff0c;等价类、边界值、正交法等测试用例设计方法都是为了更全面地设计对应的测试数据…

Spring 源码分析(六)——Bug?getBean取出的Bean居然未经初始化

Spring 是线程安全的,支持多线程并发调用。但在某种特殊情况下,使用 BeanFactory 的 getBean 方法,我成功拿到了未经初始化的 Bean(是BUG,亦或是出于某种原因考虑的特性?)。 一、获取到的 Bean 为什么未初始化? 通过 getBean 获取到未经过初始化的 Bean 需要满足如下…

【kafka】 查看节点的消息

对于初学者来说&#xff0c;可能想去节点看看有没有消息产生和消费&#xff0c;可以去kafka的bin目录下执行这个命令&#xff1a; kafka-console-consumer.bat --bootstrap-server localhost:9092 --topic myTopic --from-beginning 这个命令可以理解为&#xff1a;生产过的消…

Git 工作流程、工作区、暂存区和版本库

目录 Git 工作流程 Git 工作区、暂存区和版本库 基本概念 Git 工作流程 本章节我们将为大家介绍 Git 的工作流程。 一般工作流程如下&#xff1a; 克隆 Git 资源作为工作目录。在克隆的资源上添加或修改文件。 如果其他人修改了&#xff0c;你可以更新资源。在提交前查看…

qt中d指针

在Qt中&#xff0c;d指针是一种常见的设计模式&#xff0c;也称为"PIMPL"&#xff08;Private Implementation&#xff09;或者"Opaque Pointer"。它主要用于隐藏类的实现细节&#xff0c;提供了一种封装和隔离的方式&#xff0c;以便在不影响公共接口的情…

云原生实战课大纲

1. 云原生是什么 原生应用&#xff08;java,pyrhon&#xff09; 上云的过程应用上云遇到的问题1.微服务的拆分 微服务的访问关系应用的架构云原生适合什么样的人去学具备什么样的前提条件云原生要学习什么docker k8s devlops server mesh jks k8s监控吧自己的微服务部署上…