redux的介绍、安装、三大核心与执行流程

redux的介绍、安装、三大核心与执行流程

  • 一、redux的基本介绍
  • 二、redux的安装
  • 三、redux核心概念
    • 3.1 action
    • 3.2 reducer
    • 3.3 store
  • 四、Redux代码执行流程
  • 五、加减案例练习

一、redux的基本介绍

  • redux中文官网
  • Redux 是 React 中最常用的状态管理工具(状态容器)
  • React 只是 DOM 的一个抽象层(UI 库),并不是 Web 应用的完整解决方案。因此 React 在涉及到数据的处理以及组件之间的通信时会比较复杂

不使用redux 与 使用redux的区别 (组件之间的通讯问题)

在这里插入图片描述

  • 不使用redux
    • 1.只能使用父子组件通讯、状态提升等 React 自带机制
    • 2.处理远房亲戚(非父子)关系的组件通讯时乏力
    • 3.组件之间的数据流混乱,出现 Bug 时难定位
  • 使用redux
    • 1.集中式存储和管理应用的状态
    • 2.处理组件通讯问题时,无视组件之间的层级关系
    • 3.简化大型复杂应用中组件之间的通讯问题
    • 4.数据流清晰,易于定位 Bug

二、redux的安装

npm i redux

三、redux核心概念

  • 为了让代码各部分职责清晰、明确,Redux 代码被分为三个核心概念:action/reducer/store
    • action -> reducer -> store
    • action(动作):描述要做的事情
    • reducer(函数):更新状态
    • store(仓库):整合 action 和 reducer

类比生活中的例子来理解三个核心概念:

  • 1.action:相当于公司中要做的事情,比如软件开发、测试,打扫卫生等
  • 2.reducer:相当于公司的员工,负责干活的
  • 3.store:相当于公司的老板
  • 4.流程:老板(store)分配公司中要做的事情(action)给员工(reducer),员工干完活把结果交给老板

3.1 action

  • action:描述要做的事情,项目中的每一个功能都是一个 action
    • 计数器案例:计数器加1、减1
    • 购物车案例:获取购物车数据、切换商品选中状态
    • 项目:登录,退出等
  • 特点
    • 只描述做什么
    • JS 对象,必须带有 type 属性,用于区分动作的类型
    • 根据功能的不同,可以携带额外的数据(比如,payload 有效载荷,也就是附带的额外的数据),配合该数据来完成相应功能

核心代码 (原生html中使用)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入redux --><script src="./node_modules/redux/dist/redux.js"></script></head><body><div>1</div><button>+1</button><button>-1</button></body><script>//1.action 是一个函数  必须有type属性//1.1原始创建// const action={//     type:'ADD'// }//1.2 动态action 函数创建// const Add = () => {//   return {//     type: 'ADD',//   }// }//简写 并传参  使用()包裹对象const Add = (id) => ({ type: 'ADD', id })console.log('action', Add(3))</script>
</html>

3.2 reducer

  • reducer:函数,用来处理 action 并更新状态,是 Redux 状态更新的地方
  • 特点
    • 函数签名为:(prevState, action) => newState
    • 接收上一次的状态和 action 作为参数,根据 action 的类型,执行不同操作,最终返回新的状态
    • 注意:该函数一定要有返回值,即使状态没有改变也要返回上一次的状态
    • 约定:reducer 是一个纯函数,并且不能包含 side effect 副作用(比如,不能修改函数参数、不能修改函数外部数据、不能进行异步操作等)
    • 纯函数:相同的输入总是得到相同的输出
    • 1.不要直接修改参数 state 的值(也就是:不要直接修改当前状态,而是根据当前状态值创建新的状态值)
    • 2.不要使用 Math.random() / new Date() / Date.now() / ajax 请求等不纯的操作
    • 3.不要让 reducer 执行副作用(side effect)

核心代码 (原生html中使用)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入redux --><script src="./node_modules/redux/dist/redux.js"></script></head><body><div>1</div><button>+1</button><button>-1</button></body><script>//reducer 接收两个参数   必须有返回值   必须是纯函数//参数1 上一次的状态//参数2 action//累加const Add = (num) => ({ type: 'ADD', num })//类减const Sub = (num) => ({ type: 'SUB', num })//reducer// const reducer = (state, action) => {//   return 'reducer返回'// }const reducer = (state = 0, action) => {//使用switch caseswitch (action.type) {case 'ADD':return state + 1case 'SUB':return state - 1default:return state}}console.log('减法', reducer(1, Sub()))console.log('加法', reducer(1, { type: 'ADD' }))</script>
</html>

3.3 store

  • store:仓库,Redux 的核心,整合 action 和 reducer
  • 特点
    • 一个应用只有一个 store
    • 维护应用的状态,获取状态:store.getState()
    • 发起状态更新时,需要分发 action:store.dispatch(action)
    • 创建 store 时接收 reducer 作为参数:const store = createStore(reducer)
    • 订阅(监听)状态变化:const unSubscribe = store.subscribe(() => {})
    • 取消订阅状态变化: unSubscribe()

核心代码 (原生html中使用)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入redux --><script src="./node_modules/redux/dist/redux.js"></script></head><body><div>1</div><button>+1</button><button>-1</button></body><script>//累加const Add = (num) => ({ type: 'ADD', num })//类减const Sub = (num) => ({ type: 'SUB', num })function reducer(state = 100, action) {//使用switch caseswitch (action.type) {case 'ADD':return state + 1case 'SUB':return state - 1default:return state}}//因为不是es6 引入  全局有一个window.Reduxconsole.log('window.Redux', window.Redux)//解构 createStoreconst { createStore } = window.Reduxconsole.log('createStore', createStore)//创建store 参数一必传 (reducer)const store = createStore(reducer)console.log('store', store)//dispatch getState subscribe//1.获取redux中的数据store.getState()console.log('store.getState', store.getState())//2.订阅:只要state发生变化 这个订阅的回调函数 就会执行store.subscribe(() => {console.log('订阅', store.getState())})//3.发起状态更新时,需要分发 actionstore.dispatch(Add())console.log('store.getState', store.getState())store.dispatch(Sub())console.log('store.getState', store.getState())</script>
</html>

四、Redux代码执行流程

  • 1.创建 store 时,Redux 就会先调用一次 reducer,来获取到默认状态
  • 2.分发动作 store.dispatch(action)更新状态
  • 3.Redux store 调用 reducer 传入:上一次的状态(当前示例中就是:10)和 action({ type: 'increment' }),计算出新的状态并返回
  • 4.reducer 执行完毕后,将最新的状态交给 store,store 用最新的状态替换旧状态,状态更新完毕
import { createStore } from 'redux'
const store = createStore(reducer)// reducer(10, { type: 'increment' })
function reducer(state = 10, action) {console.log('reducer:', state, action)switch (action.type) {case 'increment':return state + 1default:return state}
}console.log('状态值为:', store.getState()) // 10// 发起更新状态:
// 参数: action 对象
store.dispatch({ type: 'increment' })
// 相当于: reducer(10, { type: 'increment' })console.log('更新后:', store.getState()) // 11

五、加减案例练习

  • 准备两个按钮 点击加号按钮 数值+1 点击减号按钮 数值-1
    在这里插入图片描述

实现代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入redux --><script src="./node_modules/redux/dist/redux.js"></script></head><body><div>1</div><button class="add">+1</button><button class="sub">-1</button></body><script>//第一步 创建action//加法const Add = (num) => ({ type: 'ADD', num })//减法const Sub = (num) => ({ type: 'SUB', num })//第二步 创建 reducerconst reducer = (state = 100, action) => {switch (action.type) {case 'ADD':return state + 1case 'SUB':return state - 1default:return state}}//第三步 引入store//3.1 解构出store 并传递reducerconst { createStore } = window.Reduxconst store = createStore(reducer)//3.2 store.getState获取redux中的数据 初始原始值document.querySelector('div').innerHTML = store.getState()//3.3 store.subscribe 订阅获取state变化store.subscribe(() => {console.log('值发生变化', store.getState())document.querySelector('div').innerHTML = store.getState()})//3.4 绑定点击事件 并调用store.dispatch 分发actiondocument.querySelector('.add').onclick = function () {store.dispatch(Add())}document.querySelector('.sub').onclick = function () {store.dispatch(Sub())}</script>
</html>

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

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

相关文章

管理类联考——逻辑——真题篇——按知识分类——汇总篇——二、论证逻辑——支持加强——第四节——分类4——比例支持

文章目录 第四节 支持加强-分类4-比例支持题-支持加强-分类4-比例支持(数据支持)-同比削弱,差比支持真题(2011-54)-支持加强-分类4-比例支持(数据支持)-同比削弱,差比支持第四节 支持加强-分类4-比例支持 题-支持加强-分类4-比例支持(数据支持)-同比削弱,差比支持…

基于深度学习创建-表情符号--附源码

表情符号深度学习概述 如今,我们使用多种表情符号或头像来表达我们的心情或感受。它们充当人类的非语言线索。它们成为情感识别、在线聊天、品牌情感、产品评论等的关键部分。针对表情符号驱动的故事讲述的数据科学研究不断增加。 从图像中检测人类情绪非常流行,这可能是由…

Ansible 实战

Ansible 实战 1. httpd 角色 目录 rootubuntu1904:~#tree -f httpd/ httpd ├── httpd/default │ └── httpd/default/main.yml ├── httpd/files │ ├── httpd/files/httpd.conf │ └── httpd/files/index.html ├── httpd/handlers │ └── http…

【数据结构】 单链表面试题讲解

文章目录 引言反转单链表题目描述示例&#xff1a;题解思路代码实现&#xff1a; 移除链表元素题目描述&#xff1a;示例思路解析&#xff1a; 链表的中间结点题目描述&#xff1a;示例&#xff1a;思路解析代码实现如下&#xff1a; 链表中倒数第k个结点题目描述示例思路解析&…

自动拉取 GitHub 仓库更新的脚本

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 由于将 HAUE-CS-WIKI 部署到了我自己的服务器上作为国内镜像站&#xff0c;每次在源站更新后都需要手动拉取镜像站的更新实在是太麻烦了&#xff0c;因此产生了编写该脚本的需求&#xff08; 读者可根据该…

腾讯大佬用了8小时讲完的Python,整整315集,拿走不谢!

Python在近几年越来越受追捧&#xff0c;很多童鞋或者职场小伙伴想要提升技能-学习Python。 这是非常好的事情&#xff0c;但问题在于很多人不知道学Python做什么&#xff0c;所以什么零碎细末、艰难晦涩、长篇大论的都去看&#xff0c;很容易陷入学不下去的困境。必须要有针对…

【docker练习】

1.安装docker服务&#xff0c;配置镜像加速器 看这篇文章https://blog.csdn.net/HealerCCX/article/details/132342679?spm1001.2014.3001.5501 2.下载系统镜像&#xff08;Ubuntu、 centos&#xff09; [rootnode1 ~]# docker pull centos [rootnode1 ~]# docker pull ubu…

【全面概览 stable diffusion】:从安装到完整使用指南

在CSDN上&#xff0c;我写了一系列关于 stable diffusion 的专栏文章&#xff0c;涵盖了从安装到使用的完整指南。在这个专栏中&#xff0c;我详细介绍了stable diffusion的基本概念、使用方法以及相关的插件和模型。 以下是该专栏的总结&#xff0c;其中包含了相关文章的链接…

前端HTML进阶

day02&#xff1a;列表、表格、表单 目标&#xff1a;掌握嵌套关系标签的写法&#xff0c;使用列表标签布局网页 01-列表 作用&#xff1a;布局内容排列整齐的区域。 列表分类&#xff1a;无序列表、有序列表、定义列表。 无序列表 作用&#xff1a;布局排列整齐的不需要规…

小程序-uni-app:hbuildx uni-app 安装 uni-icons 及使用

一、官方文档找到uni-icons uni-app官网 二、下载插件 三、点击“打开HBuildX” 四、选择要安装的项目 五、勾选要安装的插件 六、安装后&#xff0c;项目插件目录 根目录uni_modules目录下增加uni-icons、uni-scss 七、引入组件&#xff0c;使用组件 <uni-icons type&qu…

kubernetes — 常用命令介绍

目录 一、基础操作 1、简化别名设置 2、查看kubernetes的资源对象 3、创建、查看namespace 4、Pod 增删改查 二、YAML文件创建Pod 1、标签部分作用 1.生成yaml文件 2.修改yaml中的标签名 2、imagePullPolicy 1.增加镜像拉取策略 2.yaml批量创建pod 3.通过label查询…

十、Linux的root用户、用户和用户组的问题

目录 1、Linux的root用户 &#xff08;1&#xff09;基础 &#xff08;2&#xff09;如何进入root模式 &#xff08;3&#xff09;如何给普通用户配置root权限&#xff1f; 注意点&#xff1a; 配置方法&#xff1a; 2、用户/用户组问题 &#xff08;1&#xff09;用户/用…

pdf怎么合并在一起?这几个合并方法了解一下

pdf怎么合并在一起&#xff1f;在日常工作、学习和生活中&#xff0c;我们常常会遇到需要将多个PDF文件合并成一个文件的情况。比如&#xff0c;在学术论文写作中&#xff0c;我们可能需要将多篇论文合并成一个文件进行打印和提交。在工作中&#xff0c;我们可能需要将多个报告…

MacOS 安装Redis并设置密码

在开发过程中&#xff0c;需要本地进行安装Redis进行测试&#xff0c;记录了下MacOS环境下安装Redis&#xff0c;以及设置密码。 Brew 安装 $ brew install redis启动服务 # 启动服务 brew services start redis # 关闭服务 brew services stop redis # 重启服务 brew servic…

深入竞品:解读竞品分析的艺术与策略

引言&#xff1a;为何竞品分析至关重要&#xff1f; 在当今的产品环境中&#xff0c;市场变得越来越拥挤。每个角落都有新的创业公司试图创造下一个行业的颠覆者&#xff0c;同时也有成熟的巨头在不断地迭代和优化他们的产品。在这样的环境中&#xff0c;不了解您的竞争对手是…

03架构管理之测试管理

专栏说明&#xff1a;针对于企业的架构管理岗位&#xff0c;分享架构管理岗位的职责&#xff0c;工作内容&#xff0c;指导架构师如何完成架构管理工作&#xff0c;完成架构师到架构管理者的转变。计划以10篇博客阐述清楚架构管理工作&#xff0c;专栏名称&#xff1a;架构管理…

学习笔记十七:node节点选择器,亲和性

node节点选择器&#xff0c;污点、容忍度、亲和性 node节点选择器nodeName&#xff0c;指定pod节点运行在哪个具体node上nodeSelector&#xff1a;指定pod调度到具有哪些标签的node节点上 亲和性node节点亲和性使用requiredDuringSchedulingIgnoredDuringExecution硬亲和性使用…

Vue_3:声明周期钩子(组件化开发)

Vue_03_note 文章目录 Vue_03_note01-生命周期 和 **生命周期的四个阶段**什么是生命周期&#xff1f;生命周期的四个阶段 02-Vue 声明周期函数&#xff08;钩子函数&#xff09;什么是钩子函数八大钩子&#xff08;四对&#xff09;代码示例&#xff1a;八个钩子函数 03-生命周…

Intellij中直接运行ts配置:run configuration for typescript

在Intellij中可以借助插件run configuration for typescript直接运行typescript&#xff1a; run configuration for typescript插件本质还是依赖于 ts-node 来运行&#xff0c;只是其可以帮助我们自动配置好 ts-node 运行参数&#xff0c;简化使用。 第一步&#xff1a;安装…

Linux Mint 21.3 计划于 2023 年圣诞节发布

导读Linux Mint 项目近日公布了基于 Ubuntu 的 Linux Mint 发行版下一个重要版本的一些初步细节&#xff0c;以及备受期待的基于 Debian 的 LMDE 6&#xff08;Linux Mint Debian Edition&#xff09;版本。 近日&#xff0c;Linux Mint 项目负责人克莱门特-勒菲弗&#xff08;…