React(react18)中组件通信04——redux入门

React(react18)中组件通信04——redux入门

  • 1. 前言
    • 1.1 React中组件通信的其他方式
    • 1.2 介绍redux
      • 1.2.1 参考官网
      • 1.2.2 redux原理图
      • 1.2.3 redux基础介绍
        • 1.2.3.1 action
        • 1.2.3.2 store
        • 1.2.3.3 reducer
    • 1.3 安装redux
  • 2. redux入门例子
  • 3. redux入门例子——优化(reducer 和 store拆开)
    • 3.1 想要实现的效果
    • 3.2 代码设计
    • 3.3 添加 重新渲染
    • 3.4 附代码

1. 前言

1.1 React中组件通信的其他方式

  • React中组件通信01——props.
  • React中组件通信02——消息订阅与发布、取消订阅以及卸载组件时取消订阅.
  • React(react18)中组件通信03——简单使用 Context 深层传递参数.

1.2 介绍redux

1.2.1 参考官网

  • 讲解、例子,参考官网,官网地址如下:
    Redux 中文文档——https://www.redux.org.cn/.

1.2.2 redux原理图

  • 原理图,如下:
    在这里插入图片描述
  • 简单解释
    • 要想更新 state 中的数据,你需要发起一个 actionAction 就是一个普通 JavaScript 对象(注意到没,这儿没有任何魔法?)用来描述发生了什么。
    • 强制使用 action 来描述所有变化带来的好处是可以清晰地知道应用中到底发生了什么。如果一些东西改变了,就可以知道为什么变。action 就像是描述发生了什么的指示器。
    • 最终,为了把 action 和 state 串起来,开发一些函数,这就是 reducer。再次地强调,没有任何魔法,reducer 只是一个接收 state 和 action,并返回新的 state 的函数,并且是一个纯函数
    • 而整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。

1.2.3 redux基础介绍

1.2.3.1 action
  • Action 是把数据从应用(这里之所以不叫 view 是因为这些数据有可能是服务器响应,用户输入或其它非 view 的数据 )传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。
  • Action 本质上是 JavaScript 普通对象。我们约定,action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下,type 会被定义成字符串常量。当应用规模越来越大时,建议使用单独的模块或文件来存放 action。
1.2.3.2 store
  • Store 就是把它们联系到一起的对象。Store 有以下职责:
    • 维持应用的 state;
    • 提供 getState() 方法获取 state;
    • 提供 dispatch(action) 方法更新 state;
    • 通过 subscribe(listener) 注册监听器;
    • 通过 subscribe(listener) 返回的函数注销监听器。
  • 强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时,你应该使用 reducer 组合 而不是创建多个 store。
1.2.3.3 reducer
  • Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的,记住 actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state。
  • reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。
  • 整个应用只有一个单一的 reducer 函数:这个函数是传给 createStore 的第一个参数。一个单一的 reducer 最终需要做以下几件事:
    • reducer 第一次被调用的时候,state 的值是 undefined。reducer 需要在 action 传入之前提供一个默认的 state 来处理这种情况。
    • reducer 需要先前的 state 和 dispatch 的 action 来决定需要做什么事。
    • 假设需要更改数据,应该用更新后的数据创建新的对象或数组并返回它们。
    • 如果没有什么更改,应该返回当前存在的 state 本身。

1.3 安装redux

  • 命令如下:
    npm install --save redux
    

2. redux入门例子

  • 直接从官网拷贝的例子,例子地址:
    https://www.redux.org.cn/.
  • 例子如下:
    在这里插入图片描述
    import { createStore } from 'redux';/*** 这是一个 reducer,形式为 (state, action) => state 的纯函数。* 描述了 action 如何把 state 转变成下一个 state。** state 的形式取决于你,可以是基本类型、数组、对象、* 甚至是 Immutable.js 生成的数据结构。惟一的要点是* 当 state 变化时需要返回全新的对象,而不是修改传入的参数。** 下面例子使用 `switch` 语句和字符串来做判断,但你可以写帮助类(helper)* 根据不同的约定(如方法映射)来判断,只要适用你的项目即可。*/
    function counter(state = 0, action) {switch (action.type) {case 'INCREMENT':return state + 1;case 'DECREMENT':return state - 1;default:return state;}
    }// 创建 Redux store 来存放应用的状态。
    // API 是 { subscribe, dispatch, getState }。
    let store = createStore(counter);// 可以手动订阅更新,也可以事件绑定到视图层。
    store.subscribe(() =>console.log(store.getState())
    );// 改变内部 state 惟一方法是 dispatch 一个 action。
    // action 可以被序列化,用日记记录和储存下来,后期还可以以回放的方式执行
    store.dispatch({ type: 'INCREMENT' });// 1
    store.dispatch({ type: 'INCREMENT' });// 2
    store.dispatch({ type: 'DECREMENT' });// 1
    
  • 效果如下:
    在这里插入图片描述

3. redux入门例子——优化(reducer 和 store拆开)

3.1 想要实现的效果

  • 因为上面的简单例子中的state没有在页面上渲染,所以简单优化一下,实现页面渲染操作,想呈现的效果如下:
    在这里插入图片描述

  • 如果用纯react写的话,很简单,代码如下:

    import { useState } from "react";function CountNum(){const [count,setCount] = useState(0);function add(){setCount(count => count+1);}function subtract(){setCount(count => count-1);}return(<div>当前数字是:{count}<br /><br /><button onClick={add}>点我 +1</button> <br /><br /><button onClick={subtract}>点我 -1</button></div>)
    }
    export default CountNum;
    
  • 但我们目的是用redux实现,所以继续……

3.2 代码设计

  • 项目结构,如下:
    在这里插入图片描述
  • store.js 和 countReducer.js 如下:
    在这里插入图片描述
  • CountNumRedux.jsx 组件如下:
    在这里插入图片描述
  • 看效果,有问题
    在这里插入图片描述
    怎么重新渲染?继续……

3.3 添加 重新渲染

  • 使用 useEffect 进行重新渲染,核心代码如下:

    useEffect(()=>{store.subscribe(()=>{console.log('订阅更新,打印2-----',store.getState());setCount(store.getState());});
    });
    

    在这里插入图片描述

  • 然后再看效果:
    在这里插入图片描述

  • 关于useEffect ,可以看下面的文章:
    React中组件通信02——消息订阅与发布、取消订阅以及卸载组件时取消订阅.

3.4 附代码

  • countReducer.js

    /*** 这是一个 reducer,形式为 (state, action) => state 的纯函数。* 描述了 action 如何把 state 转变成下一个 state。** state 的形式取决于你,可以是基本类型、数组、对象、* 甚至是 Immutable.js 生成的数据结构。惟一的要点是* 当 state 变化时需要返回全新的对象,而不是修改传入的参数。** 下面例子使用 `switch` 语句和字符串来做判断,但你可以写帮助类(helper)* 根据不同的约定(如方法映射)来判断,只要适用你的项目即可。*/function countReducer(state = 0,action){console.log(`state:${state}---action:${action}---type:${action.type}`);switch (action.type){case 'INCREMENT':return state + 1;case 'DECREMENT':return state - 1;default:return state;}
    }
    export default countReducer;
    
  • store.js

    import { createStore } from 'redux';import countReducer from './countReducer.js'const store = createStore(countReducer);export default store;
    
  • CountNumRedux.jsx

    import { useState,useEffect } from "react";
    import store from '../redux/store'function CountNumRedux(){const [count,setCount] = useState(0);function add(){// setCount(count => count+1);//派发action 改变内部 state 惟一方法是 dispatch 一个 action。store.dispatch({ type: 'INCREMENT' });}function subtract(){// setCount(count => count-1);store.dispatch({ type: 'DECREMENT' });}// 可以手动订阅更新,也可以事件绑定到视图层。// store.subscribe(() =>//     console.log('订阅更新,打印1-----',store.getState())// );useEffect(()=>{store.subscribe(()=>{console.log('订阅更新,打印2-----',store.getState());setCount(store.getState());});});return(<div>当前数字是:{count}    &nbsp;&nbsp;&nbsp;&nbsp;当前数字是:{store.getState()}  <br /><br /><button onClick={add}>点我 +1</button> <br /><br /><button onClick={subtract}>点我 -1</button></div>)
    }export default CountNumRedux;
    

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

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

相关文章

Mybatis 中 SQL 注入攻击的 3 种方式

SQL注入漏洞作为WEB安全的最常见的漏洞之一&#xff0c;在java中随着预编译与各种ORM框架的使用&#xff0c;注入问题也越来越少。往往对Java Web应用的多个框架组合而心生畏惧&#xff0c;不知如何下手&#xff0c;希望通过Mybatis框架使用不当导致的SQL注入问题为例&#xff…

[Qt/C/C++]JSON和程序发布

文章摘于 爱编程的大丙 文章目录 1. JSON1.1 Json数组1.2 Json对象1.3 注意事项 2. Qt中JSON操作2.1 QJsonValue2.2 QJsonObject2.3 QJsonArray2.4 QJsonDocument2.5 举例2.5.1 写文件2.5.2 读文件 3. cjson库的使用3.1 cJSON结构体3.2 cJson API3.2.1 数据的封装3.2.2 Json对…

Kotlin File FileTreeWalk walkTopDown onEnter onLeave

Kotlin File FileTreeWalk walkTopDown onEnter onLeave Python遍历文件目录os.walk_for subfolder in subfolders: print(foldername/_zhangphil的博客-CSDN博客import osfor folderName, subfolders, filenames in os.walk(rD:\code\vs_code): print(当前文件夹: folderName…

踩坑:Invalid character found in method name. HTTP method names must be tokens

一、原因 在进行本地小程序与服务端请求时,由于加了签名认证,访问接口时报错 Spring boot端 小程序端 二、解决方案 2.1 更改访问路径 将https:更换成http: 示例:https://localhost:8080 改为 http://localhost:8080 2.2其他原因 ssl证书到期了Tomcat的header缓冲区大小不…

Python 搭建编程环境

一、搭建编程环境 1、下载python 官网&#xff1a;https://www.python.org 2、开始安装 下载安装版本&#xff0c;双击下载的安装包&#xff0c;如下&#xff1a; 步骤一&#xff1a; 步骤二&#xff1a; 步骤三&#xff1a; 安装完成后执行下面的操作&#xff0c;判断是否…

用Jmeter进行压测详解

简介&#xff1a; 1.概述 一款工具&#xff0c;功能往往是很多的&#xff0c;细枝末节的地方也很多&#xff0c;实际的测试工作中&#xff0c;绝大多数场景会用到的也就是一些核心功能&#xff0c;根本不需要我们事无巨细的去掌握工具的所有功能。所以本文将用带价最小的方式讲…

vue的由来、vue教程和M-V-VM架构思想、vue的使用、nodejs

vue vue的由来 vue教程和M-V-VM架构思想 vue的初步简单使用 nodejs vue的由来 # 1 HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES11)&#xff1a;编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 ->…

国泰君安基本操作学习

对于主面板 1.放大或者缩小k线方法&#xff1a;按着ctrl键滚轮 2.切到历史k线&#xff1a;不断缩小k线后&#xff0c;把鼠标放置k线位置再按着ctrl滚轮放到可以切到当时的历史数据。 ★3.上下切换股票&#xff1a;滚轮。 ★4.面板直接输入股票代码后&#xff0c;自动弹出窗…

驱动开发练习,platform驱动模型的使用

一.总线模型介绍 linux中将一个挂载在总线上的驱动的驱动模型分为三部分&#xff1a;device、driver和bus&#xff1b; device部分&#xff1a;用来保存设备信息对象&#xff0c;在内核中一个klist_device链表中进行管理&#xff1b; driver部分&#xff1a;用来保存驱动信息对…

“毛细血管”的进化:华为分销业务如何让伙伴也有“高能级”

作者 | 曾响铃 文 | 响铃说 数字化蓬勃发展的大时代&#xff0c;除了那些中、大型企业&#xff0c;数量更为庞大的小微企业同样有借助数字化产品、服务来提升企业经营的需求&#xff0c;由此也带来了广袤的数字化分销市场。 这里处在聚光灯之外&#xff0c;很少被数字化时代…

PHP8的类与对象的基本操作之成员变量-PHP8知识详解

成员变量是指在类中定义的变量。在类中可以声明多个变量&#xff0c;所以对象中可以存在多个成员变量&#xff0c;每个变量将存储不同的对象属性信息。 例如以下定义&#xff1a; public class Goods { 关键字 $name; //类的成员变量 }成员属性必须使用关键词进行修饰&#xf…

无涯教程-JavaScript - SUMIFS函数

描述 SUMIFS函数添加其满足多个条件的所有参数。 语法 SUMIFS (sum_range, criteria_range1, criteria1, [criteria_range2, criteria2] ...)争论 Argument描述Required/OptionalSum_rangeThe range of cells to sum.RequiredCriteria_range1 使用Criteria1测试的范围。 Cr…

leetcode646. 最长数对链(java)

最长数对链 题目描述贪心解法二 动态规划 dp 题目描述 难度 - 中等 leetcode646. 最长数对链(java) 给你一个由 n 个数对组成的数对数组 pairs &#xff0c;其中 pairs[i] [lefti, righti] 且 lefti < righti 。 现在&#xff0c;我们定义一种 跟随 关系&#xff0c;当且仅…

RHCSA_Linux 从命令行管理文件

目录 一、文件命令规范&#xff1a; 二、创建链接文件 1、创建软链接文件 2、创建硬链接文件 三、目录操作命令 1、创建目录 -- mkdir 2、统计目录及文件的空间占用情况 -- du 3、删除目录文件 四、创建、删除普通文件 1、创建普通文件 2、删除普通文件 五、数据流和…

Vivado下PLL实验

文章目录 前言一、CMT&#xff08;时钟管理单元&#xff09;1、CMT 简介2、FPGA CMT 框图3、MMCM 框图4、PLL 框图 二、创建工程1、创建工程2、PLL IP 核配置3、进行例化 三、进行仿真1、创建仿真文件2、进行仿真设置3、进行行为级仿真 四、硬件验证1、引脚绑定2、生成比特流文…

SAP 打note步骤

SAP 打note步骤 先确定需要实施的note 1.登录sap支持门户网站&#xff0c;查找note文件。https://support.sap.com/en/index.html 2.下载note文件到本地 3.事务代码SNOTE上传note文件 4.实施note,选中上传note&#xff0c;执行 5.往后一直确认 6.显示已实施成功 7.查看系…

驱动开发练习,platform实现如下功能

实验要求 驱动代码 #include <linux/init.h> #include <linux/module.h> #include <linux/platform_device.h> #include <linux/mod_devicetable.h> #include <linux/of_gpio.h> #include <linux/unistd.h> #include <linux/interrupt…

爬虫技术对携程网旅游景点和酒店信息的数据挖掘和分析应用

导语 爬虫技术是一种通过网络爬取目标网站的数据并进行分析的技术&#xff0c;它可以用于各种领域&#xff0c;如电子商务、社交媒体、新闻、教育等。本文将介绍如何使用爬虫技术对携程网旅游景点和酒店信息进行数据挖掘和分析&#xff0c;以及如何利用Selenium库和代理IP技术…

【element-ui】el-date-picker 之picker-options时间选择区间禁用效果的实现

element-ui 时间选择器的时间区间禁用dom层引入:picker-option <el-date-pickerv-model"searchFormObj.workTime"clearablevalue-formate"yyyy-MM-dd":picker-options"pickerOptions"placeholder"请选择时间" ></el-date-pi…

反转单链表

思路图1&#xff1a; 代码&#xff1a; struct ListNode* reverseList(struct ListNode* head){if(headNULL)//当head是空链表时 {return head; }struct ListNode* n1NULL;struct ListNode* n2head;struct ListNode* n3head->next;if(head->nextNULL)//当链表只有一个节…