Redux - Redux在React函数式组件中的基本使用

在这里插入图片描述

文章目录

    • 一,简介
    • 二,安装
    • 三,三大核心概念Store、Action、Reducer
      • 3.1 Store
      • 3.2 Reducer
      • 3.3 Action
    • 四,开始函数式组件中使用
      • 4.1,引入store
      • 4.1,store.getState()方法
      • 4.3,store.dispatch()方法
      • 4.4,store.subscribe()方法
    • 五,Redux 的三大原则

一,简介

Redux 是 JavaScript 应用的状态容器,提供可预测的状态管理。

它主要的几个方法如下:

在这里插入图片描述
重要的有方法 有 dispatch(分发action)getState(获取state)subscribe(监听state的变化),下面会介绍到,另外两个可以不用管;


那什么时候使用Redux呢?

当遇到如下问题时,建议开始使用 Redux

  1. 你有很多数据随时间而变化
  2. 你希望状态有一个唯一确定的来源(single source of truth)
  3. 你发现将所有状态放在顶层组件中管理已不可维护

二,安装

我这里安装的是 "redux": "^4.2.1"版本;

npm install redux --save

项目的src目录下面新建store文件夹index.js,reducer.js;如下:

在这里插入图片描述

三,三大核心概念Store、Action、Reducer

3.1 Store

Store:存储数据的地方。最好整个应用只有一个 Store。

createStore() :用来生成 Store。接收 Reducer 作为其参数。

index.js

/*** 引入createStore 专门创建最为核心的store对象* 目前createStore已经弃用,所以我们要引用legacy_createStore */iimport { legacy_createStore } from "redux";
import reducer from './reducer.ts'// 创建数据仓库 引入reducer函数进行对数据的处理
const store = legacy_createStore(reducer)export default store

3.2 Reducer

reduce的本质就是一个函数 ,作用是初始化状态和加工状态。

reduce函数里面接收两个参数,第一个参数是state的初始值,第二个参数是一个action对象,对象里的第一个属性是type也就是函数的名称,第二个属性就是传进来的值,用于后续更改state;

reducer.ts


// 约束类型
interface Eula {name: string;age: number;
}
// 定义数据
const defaultState: Eula = {name: "Eula",age: 18
};// reducer 函数 用于更改数据
let reducer = (preState = defaultState, action: { type: string; data: number }) => {// action解构出来let { type, data } = action;// 第一种写法 每个分支使用return进行返回// switch (type) {//   case "update_age"://     preState.age = data;//     return preState;//   case "add_age"://     preState.age++;//     return preState;//   case "del_age"://     preState.age--;//     return preState;//   default://     return preState; // 初始化时// }// 第二种写法 break 与最终的return返回结果switch (type) {case "update_age":preState.age = data;break;case "add_age":preState.age++;break;case "del_age":preState.age--;break;default:preState; // 初始化时}return preState;  // 此处 一定要使用return进行返回最终改变的值
};export default reducer;

注意: 初次加载 Store 会自动调用一次 Reducer 进行初始化状态,此时 state 是 undefined,action 对象中的 type 为 @@redux/INITxxx。手动调用 store.dispatch() 也会触发 Reducer 的自动执行。

3.3 Action

Action 就是一个普通的 JS 对象,用于描述要更新的数据类型和内容,其中 type 属性是必须的,表示 Action 的名称,其他属性可以自由设置。

redux.tsx

// 引入store
import store from "../../../store/index";
// 更改数据时调用
store.dispatch({ type: "update_age", data: 100 });

store.dispatch():所有数据的变化,必须通过派发(dispatch) Action 来更新。接受一个 Action 对象作为参数,将其发送出去。

四,开始函数式组件中使用

redux.tsx

import React, { useState } from "react";
//  1,引入store
import store from "../../../store/index";// 渲染数据
const myList:[] = [];const Redux: React.FC = () => {let [list, setList] = useState(myList);console.log("store:", store);// 监听数据的变化const unsubscribe = store.subscribe(() => {console.log("订阅数据的变化", store.getState());// 此处用来触发视图的更新setList([]);});// 改变store中的数据const update = () => {store.dispatch({ type: "update_age", data: 100 });};const add = () => {store.dispatch({ type: "add_age" });};const del = () => {store.dispatch({ type: "del_age" });};// 此处才是真正渲染的页面return (<div className="redux"><h3>redux演示</h3><button onClick={update}>更改store的数据+100</button><button onClick={add}>更改store的数据++</button><button onClick={del}>更改store的数据--</button><p>store的num数据:{store.getState().age}</p></div>);
};
export default Redux;

效果图:

在这里插入图片描述

上面的组件是一个简单的案例演示,定义了三个点击事件,点击第一个按钮state.age+100,点击第二个按钮每次state.age+1,点击第三个按钮age每次减一;下面会详细介绍几个重点内容:

4.1,引入store

先引进来,这个没什么好说的;

import store from "../../../store/index";

4.1,store.getState()方法

getState()方法是redux实例下的方法之一,上面的第一张截图已经通过store实例打印出来了;

getState()的作用是获取当前状态下运行在redux中的state;也就是说获取store中最新的数据;

   <p>store的num数据:{store.getState().age}</p>

4.3,store.dispatch()方法

dispatch() 是唯一能够修改 state 数据的行为。通过分发action (其实就是一个对象),配合 dispatch 函数传入的 action 及其 payload 计算得到新的 state,并更新到闭包数据中,这样就实现了 state 的更新;

如下:
reducer.tsx

  // 改变store中的数据const update = () => {store.dispatch({ type: "update_age", data: 100 });};const add = () => {store.dispatch({ type: "add_age" });};const del = () => {store.dispatch({ type: "del_age" });};

上面的代码会和下面的 switch case 表达式所判断的type要一 一对应,用于更新state;

reducer.ts

let reducer = (preState = defaultState, action: { type: string; data: number }) => {let { type, data } = action;// 第一种写法 每个分支使用return进行返回// switch (type) {//   case "update_age"://     preState.age = data;//     return preState;//   case "add_age"://     preState.age++;//     return preState;//   case "del_age"://     preState.age--;//     return preState;//   default://     return preState; // 初始化时// }// 第二种写法 break 与最终的return返回结果switch (type) {case "update_age":preState.age = data;break;case "add_age":preState.age++;break;case "del_age":preState.age--;break;default:preState; // 初始化时}return preState;  // 此处 一定要使用return进行返回最终改变的值
};

上面的两种写法是一样的;对比一下;

4.4,store.subscribe()方法

subscribe函数只要store中的state数据变化了,就会触发subscribe方法,相当注册了一个监听器;监听store中的数据变化;

从 react 层面来说,redux 的 store 是隔离开的,我们需要一个桥梁,使得数据层出现更新的同时更新UI层逻辑,这时 store 中的最后一个方法,subscribe 方法就派上用场了。

注意: setList([]):是为了主动触发react视图更新的方法,否则store中数据改变了,视图却没有重新渲染。

import React, { useState } from "react";
const Redux: React.FC = () => { let [list, setList] = useState(myList);
// 监听数据的变化const unsubscribe = store.subscribe(() => {console.log("订阅数据的变化", store.getState());// 此处用来触发视图的更新setList([]);});
}

subscribe也同时返回了一个 unsubscribe 函数。当我们不在希望订阅这个监听器时,调用 unsubscribe(),对应的函数就会从监听器队列中被移除。

unsubscrib() // 不再监听

五,Redux 的三大原则

  1. 单一数据源:整个应用程序的 State 被存储在一棵 object tree 中,并且这棵 object tree 只存储在一个 Store 中。单一数据源可以让整个应用程序的 State 变得方便维护、修改、追踪。
  2. State 是只读的:唯一修改 State 的方法就是触发 Action,不要试图在其他地方通过任何的方式来修改State。这样可以保证所有的修改都被集中化处理,并且按照严格的顺序来执行。
  3. 使用纯函数来执行修改:通过 Reducer 将旧的 State 和 Action 联系在一起,返回一个新的 State。所有的Reducer 都应该是纯函数,不能产生任何的副作用。

End:


[redux中文网]: https://cn.redux.js.org/

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

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

相关文章

04-4_Qt 5.9 C++开发指南_时间日期与定时器

文章目录 1. 时间日期相关的类2. 源码2.1 可视化UI设计2.2 dialog.h2.3 dialog.cpp 1. 时间日期相关的类 时间日期是经常遇到的数据类型&#xff0c;Qt 中时间日期类型的类如下。 QTime:时间数据类型&#xff0c;仅表示时间&#xff0c;如 15:23:13。 QDate:日期数据类型&…

虹科方案 | 汽车总线协议转换解决方案

汽车总线&#xff1a; 汽车总线是一种用于在车辆电子系统中传输数据和控制信息的通信系统。它允许不同的电子控制单元&#xff08;ECU&#xff09;在车辆中相互通信&#xff0c;协调各个系统的操作&#xff0c;以实现功能的集成和协同工作。 在现代汽车中&#xff0c;综合通信…

微信公众号模板消息推送测试Python版无需服务器-保姆级教程

手上有个项目&#xff0c;是服务器挂着自动化的爬虫的&#xff0c;但我用的那个IP代理商没有用尽报警&#xff0c;导致几次IP用尽&#xff0c;程序爬不到数据&#xff0c;进程死循环了。之前想过发邮箱提醒我&#xff0c;但是邮箱把又不及时&#xff0c;老忘记看&#xff0c;因…

C语言必会题目(1)

W...Y的主页 &#x1f60a; 代码仓库分享❤️ 在学习语言时&#xff0c;最重要的就是练习&#xff0c;光听不练假把式。下面我就推荐一些C语言必会的题。 执行下面程序&#xff0c;正确的输出是&#xff08; &#xff09; int x5,y7; void swap() { int z; zx; xy; yz; } int…

数字孪生三剑客来了!MapGIS Earth for Unreal的自述

嗨&#xff0c;大家好&#xff01;我的名字叫MapGIS Earth for Unreal&#xff0c;是MapGIS数字孪生平台产品家族的一员。提起我&#xff0c;大家可能不熟悉&#xff0c;但是提起数字孪生&#xff0c;想必大家倍感兴趣。 数字孪生是充分利用物理模型、传感器更新、运行历史等数…

【git】解决遇到的问题

目录 一、error: RPC failed; curl 6 OpenSSL SSL_read: Connection was reset, errno 10054 二、error: RPC failed; curl 6 OpenSSL SSL_read: Connection was reset, errno 10054 一、error: RPC failed; curl 6 OpenSSL SSL_read: Connection was reset, errno 10054 报…

2023最新Windows编译ffmpeg详细教程,附msys2详细安装配置教程

安装MSYS2 msys2是一款跨平台编译套件&#xff0c;它模拟linux编译环境&#xff0c;支持整合mingw32和mingw64&#xff0c;能很方便的在windows上对一些开源的linux工程进行编译运行。 类似的跨平台编译套件有&#xff1a;msys&#xff0c;cygwin&#xff0c;mingw 优势&…

MySQL8的特性-MySQL8知识详解

MySQL是一个多用户、多线程的SQL数据库服务器。SQL&#xff08;结构化查询语言&#xff09;是世界上最流行和标准化的数据库语言。下面是MySQL的特性。 1、开源性&#xff1a;MySQL是一个开源的关系型数据库管理系统&#xff0c;可以免费使用和修改。 2、可靠性&#xff1a;M…

DOCKER的容器

1. 什么是Container&#xff08;容器&#xff09; 要有Container首先要有Image&#xff0c;也就是说Container是通过image创建的。 Container是在原先的Image之上新加的一层&#xff0c;称作Container layer&#xff0c;这一层是可读可写的&#xff08;Image是只读的&#xff0…

TOMCAT部署及优化(Tomcat配置文件参数优化,Java虚拟机(JVM)调优)

TOMCAT tomcat &#xff1a;是一个开放源代码的web应用服务器&#xff0c;基于java代码开发的。也可以理解为tomacat就是处理动态请求和基于java代码的页面开发。可以在html当中写入java代码&#xff0c;tomcat可以解析html页面当中的java&#xff0c;执行动态请求&#xff0c;…

Nvm安装与使用

【1】nvm下载地址 https://github.com/coreybutler/nvm-windows/releases 选择的是nvm-setup.exe 【2】安装nvm 打开cmd&#xff0c;输入命令nvm -v 查看nvm版本&#xff0c;出现如下界面说明成功 【3】nodejs 安装与管理 打开CMD命令&#xff0c;以管理员权限运行 1、…

如何维护自己的电脑

目录 1、关于电脑选择的建议 1.1、价格预算 1.2、明确需求 1.3、电脑配置 1.4、分辨率 1.5、续航能力 1.6、品牌选择 1.7、用户评测 1.8、各个电商平台对比 1.9、最后决策 2、我的选择 3、电脑保养 3.1 外部清洁 3.2 安装软件 3.3 优化操作系统 3.4 维护硬件设…

那些年的golang开发经验记录

goland 问题CreateProcess error216, 该版本的 %1 与你运行的 Windows 版本不兼容。请查看计算机的系统信息&#xff0c;然后联系软件发布者 Cannot run program "......" (in directory "D:\project\go\awesomeProject\src\test"): CreateProcess error2…

Linux系列:从0到1用Docker部署springboot项目

目录 1.前提条件 2.编写DockerFile镜像文件 3.打包SpringBoot项目 4.通过软件Xftp进行传输&#xff08;*&#xff09; 1.点击“文件-新建”​编辑 5.操作远程主机 1.docker构建 2.容器运行 6.容器的关闭和删除 1.前提条件 Linux、docker、xftp的安装、一台可以访问的远…

GIL 锁或将在 CPython 中成为可选项

哈喽大家好&#xff0c;我是咸鱼 几天前有媒体报道称&#xff0c;经过多次辩论&#xff0c;Python 指导委员会打算批准通过 PEP 703 提案&#xff0c;让 GIL&#xff08;全局解释器&#xff09;锁在 CPython 中成为一个可选项 PEP 703 提案主要目标是使 GIL 变成可选项&#…

flink如何监听kafka主题配置变更

背景&#xff1a; 从前一篇文章我们知道flink消费kafka主题时是采用的手动assign指定分区的方式&#xff0c;这种消费方式是不处理主题的rebalance操作的&#xff0c;也就是消费者组中即使有消费者退出或者进入也是不会触发消费者所消费的分区的&#xff0c;那么疑问就来了&am…

【CSS】背景图定位问题适配不同机型

需求 如图, 实现一个带有飘带的渐变背景 其中头像必须显示飘带凹下去那里 , 需要适配不同的机型, 一不下心容易错位 实现 因为飘带背景是版本迭代中更新的, 所以飘带和渐变背景实则两个div 飘带切图如下 , 圆形部分需要契合头像 <view class"box-bg"><…

【脚踢数据结构】链表(1)

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言,Linux基础,ARM开发板&#xff0c;软件配置等领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff01;送给自己和读者的一句鸡汤&#x1f914;&…

电脑麦克风没声音?

这3招就可以解决&#xff01; 在我们使用电脑录制视频时&#xff0c;有时会遇到一个令人头疼的问题&#xff1a;麦克风没有声音。那么&#xff0c;为什么会出现这种情况呢&#xff1f;更重要的是&#xff0c;我们应该如何解决这个问题呢&#xff1f;本文将介绍3种方法&#xf…