Redux-状态管理组件

一、简介

        react中的状态只属于某个组件。而Redux是一个全局管理js状态的架构,让组件通信更加容易。

之前是状态在所有组件间传递,而redux通过store来实现这个功能。

Redux特性:

1.Single source Of truth,通过store唯一维护状态。

2.可预测性,state + action -> new state

3.纯函数更新store (纯函数 -> 输入决定输出)

举个例子: 待办事项表

function todos(state = [], action){switch(action.type){case 'ADD_TODO':return state.concat([{text: action.text, completed: false}]);case 'TOGGLE_TODO':return state.map((todo, idx) => {action.index === idx ? {text: todo.text, completed: !toto.completed}: todo})default:return state}}

二、核心概览

拿上图举个例子,前端ui产生了deposit和withdraw2个事件,store通过dispatcher分发对应的事件给reducer处理,reducer处理后更新state。前端ui根据state重新渲染。

1.store

Redux的状态机实现,store 通过state存储状态,通过dispatch传播事件,通过Reducer处理事件。

2.action

        action表示变更事件。一般包含event type 和 context。

3.Reducer

        reducer是状态事件处理。

举个例子: 待办事项表

function todoApp(state = initialState, action){switch (action.type){case ADD_TODO:return Object.assign({}, state, {todos:[...state.todos,{text: action.text,completed: false}]});default:return state;}
}

三、使用示例

用redux实现一个简单计数器,包括增加、减少功能。

import React from 'react';
import {createStore} from 'redux';
function run(){// store initial stateconst initialState = { count: 0};// reducerconst counter = (state = initialState, action) => {switch (action.type){case "PLUS_ONE":return {count: state.count + 1};case "MiNUS_ONE":return {count: state.count - 1};case "CUSTOM_COUNT":return {count: state.count + action.payload.count};default:return state;}  }// create storeconst store = createStore(counter);// Action creatorfunction plusOne(){return {type: "PLUS_ONE"}}function minusOne(){return {type: "MINUS_ONE"};}function customCount(count){return {type: "CUSTOM_COUNT", payload:{count}};}// 订阅redux 状态变更store.subscribe(() => console.log(store.getState()));store.dispatch(plusOne());store.dispatch(minusOne());store.dispatch(customCount(5));
}export default ()  => {<div><button onClick={run}>Run</button><p>* 请打开控制台查看运行结果</p></div>
}

bindActionCreators使用,工具类,可以减少显示dispatch操作

import React from 'react';
import {createStore, bindActionCreators} from 'redux';
function run(){// store initial stateconst initialState = { count: 0};// reducerconst counter = (state = initialState, action) => {switch (action.type){case "PLUS_ONE":return {count: state.count + 1};case "MiNUS_ONE":return {count: state.count - 1};case "CUSTOM_COUNT":return {count: state.count + action.payload.count};default:return state;}  }// create storeconst store = createStore(counter);// Action creatorfunction plusOne(){return {type: "PLUS_ONE"}}function minusOne(){return {type: "MINUS_ONE"};}function customCount(count){return {type: "CUSTOM_COUNT", payload:{count}};}plusOne = bindActionCreators(plusOne, store.dispatch);minusOne = bindActionCreators(minusOne, store.dispatch);customCount = bindActionCreators(customCount, store.dispatch);// 订阅redux 状态变更store.subscribe(() => console.log(store.getState()));plusOne();minusOne();customCount(5);
}export default ()  => {<div><button onClick={run}>Run</button><p>* 请打开控制台查看运行结果</p></div>
}

四、结合React使用

使用Connect功能,将redux的action和state作为props传递给组件。

计数器组件使用样例

import React from 'react';
import {createStore, bindActionCreators} from 'redux';
import {Provider, connect} fomr 'react-redux';// store initial state
const initialState = {count: 0};// reducer
const counter = (state = initialState, action) => {switch (action.type){case "PLUS_ONE":return {count: state.count + 1};case "MiNUS_ONE":return {count: state.count - 1};case "CUSTOM_COUNT":return {count: state.count + action.payload.count};default:return state;}  
}
// create store
const store = createStore(counter);
// Action creator
function plusOne(){return {type: "PLUS_ONE"}
}
function minusOne(){return {type: "MINUS_ONE"};
}export class Counter extends React.Component{render(){const {count, plusOne, minusOne} = this.props;return (<div className = "counter"><button onClick = {minusOne}>-</button><span>{count}</span><button onClick = {plusOne}>+</button></div>);}
}// 将store的state与组件props绑定
function mapStateToProps(state){return {count: state.count};
}// 将store的action与组件props绑定
function mapDispatchToProps(dispatch){return bindActionCreators({plusOne, minusOne}, dispatch)
}// 通过connect组件将store与counter组件关联
const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter) ;// 返回使用样例
export default class CounterSample extends React.Component{render(){return (// prodiver 基于react context实现,可以让里面的子组件都能获取到store<Provider store = {store}><ConnectedCounter/></Provider>);}
}

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

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

相关文章

JDBC编程

1. JDBC 简介 1.1 JDBC概述 : JDBC : Java DataBase Connectivity&#xff0c;是Sun公司制定的Java程序连接和操纵数据库的一组应用接口标准 1.2 JDBC 编程步骤 (1) 引入 java.sql 包的所有类及接口。 (2) 加载相应数据库的JDBC驱动程序。不同数据库系统的JDBC驱动程序不同&…

多视图聚类的论文阅读(一)

当聚类的方式使用的是某一类预定义好的相似性度量时&#xff0c; 会出现如下情况&#xff1a; 数据聚类方面取得了成功&#xff0c;但它们通常依赖于预定义的相似性度量&#xff0c;而这些度量受原始方法的影响:当输入维数相对较高时&#xff0c;往往是无效的。 1. Deep Mult…

python爬取快手视频

原理 F12点击graphql能够看到里面有若干视频信息,一会儿要取其中的url地址 右键复制cURL 然后进入到这个转换器连接 https://curlconverter.com/python/ 点击这个连接复制上述信息,然后就能解析处下面的代码,拷贝到你的项目中替换cookies,headers,json_data 源代码 …

使用 Hugging Face Transformer 微调 BERT

微调 BERT有助于将其语言理解能力扩展到更新的文本领域。BERT 的与众不同之处在于它能够掌握句子的上下文关系,理解每个单词相对于其邻居的含义。我们将使用 Hugging Face Transformers 训练 BERT,还将教 BERT 分析 Arxiv 的摘要并将其分类为 11 个类别之一。 为什么微调 BER…

[和ChatGPT学编程]Python Requests 简介

requests 是一个流行的 Python 库&#xff0c;用于发送 HTTP 请求。它提供了简洁而友好的 API&#xff0c;使得发送 HTTP 请求变得简单而直观。requests 具有许多强大的功能&#xff0c;适用于各种 HTTP 请求场景&#xff0c;包括 GET、POST、PUT、DELETE 等。 目录 requests 库…

【Django-DRF用法】多年积累md笔记,第3篇:Django-DRF的序列化和反序列化详解

本文从分析现在流行的前后端分离Web应用模式说起&#xff0c;然后介绍如何设计REST API&#xff0c;通过使用Django来实现一个REST API为例&#xff0c;明确后端开发REST API要做的最核心工作&#xff0c;然后介绍Django REST framework能帮助我们简化开发REST API的工作。 全…

Docker Swarm: 容器编排的力量和优势深度解析

文章目录 Docker Swarm的核心概念1. 节点&#xff08;Node&#xff09;2. 服务&#xff08;Service&#xff09;3. 栈&#xff08;Stack&#xff09; 使用Docker Swarm1. 初始化Swarm2. 加入节点3. 创建服务4. 扩展和缩减服务5. 管理栈6. 管理服务更新 Docker Swarm的优势深度解…

shadow复习之planar shadow

planar shadow 通常来说 shadow都是画一个map 这个map有个很大的问题&#xff0c;那就是size有问题 你希望有很高的精度&#xff0c;就必定要用大size的图片&#xff0c;这显然是不太妙的 那么这里就出现一个取巧的法子&#xff0c;如果你只考虑投影到平面上&#xff0c;光源是…

分类预测 | Matlab实现基于SDAE堆叠去噪自编码器的数据分类预测

分类预测 | Matlab实现基于SDAE堆叠去噪自编码器的数据分类预测 目录 分类预测 | Matlab实现基于SDAE堆叠去噪自编码器的数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现基于SDAE堆叠去噪自编码器的数据分类预测&#xff08;完整源码和数据) 2.多…

C#中的DateTime类

C# 中的 DateTime 类是用于表示日期和时间的结构。它提供了一系列属性和方法&#xff0c;用于处理日期和时间的各种操作和计算。下面是一些常用的 DateTime 类的用法和方法解释&#xff0c;以及相应的示例说明&#xff1a; 创建 DateTime 对象&#xff1a; 使用当前日期和时间创…

Kubernetes学习-概念2

参考&#xff1a;关于 cgroup v2 | Kubernetes 关于 cgroup v2 在 Linux 上&#xff0c;控制组约束分配给进程的资源。 kubelet 和底层容器运行时都需要对接 cgroup 来强制执行为 Pod 和容器管理资源&#xff0c; 这包括为容器化工作负载配置 CPU/内存请求和限制。 Linux 中…

概念理论类: TCP/IP、Http、Socket之间的区别

转载&#xff1a;百度安全验证 一、TCP/IP 1. 定义 TCP/IP&#xff08;Transmission Control Protocol/Internet Protocol&#xff09;是一组用于互联网的通信协议&#xff0c;由美国国防部高级研究计划署&#xff08;ARPA&#xff09;在20世纪70年代开发&#xff0c;被广泛…

BatchNormalization:解决神经网络中的内部协变量偏移问题

ICML2015 截至目前51172引 论文链接 代码连接(planing) 文章提出的问题 减少神经网络隐藏层中的”内部协变量偏移”问题。 在机器学习领域存在“协变量偏移”问题,问题的前提是我们划分数据集的时候,训练集和测试集往往假设是独立同分布(i.i.d)的,这种独立同分布更有利于…

结合scss实现黑白主题切换

是看了袁老师的视频后&#xff0c;自己做了一下练习。原视频地址&#xff1a; b站地址https://www.bilibili.com/video/BV15z4y1N7jB/?spm_id_from333.1007.top_right_bar_window_history.content.click&vd_sourcec6cf63302f28d94ebc02cbedcecc57ea首先创建一个全局的scs…

“ /^A-Z:\\{1,2}^/:\*\?<>\|+\.(jpg|gif|png|bmp)$/i ”这个正则表达式的理解

这个正则表达式可以分解为以下几个部分&#xff1a; ^&#xff1a;这是一个开始符号&#xff0c;表示匹配必须从字符串的开始部分开始。/&#xff1a;这是一个斜杠符号&#xff0c;通常在正则表达式中用来表示特殊字符的转义。A-Z:&#xff1a;这部分表示匹配一个大写字母后跟…

055-第三代软件开发-控制台输出彩虹日志

第三代软件开发-控制台输出彩虹日志 文章目录 第三代软件开发-控制台输出彩虹日志项目介绍控制台输出彩虹日志实现原理真实代码 总结 关键字&#xff1a; Qt、 Qml、 关键字3、 关键字4、 关键字5 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QM…

GSVA,GSEA,KEGG,GO学习

目录 GSVA 1&#xff1a;获取注释基因集 2&#xff1a;运行 GSEA 1,示例数据集 2,运行 GSEA_KEGG富集分析 GSEA_GO富集分析 DO数据库GSEA MSigDB数据库选取GSEA KEGG 1&#xff1a;运行 2&#xff1a;绘图 bar图 气泡图 绘图美化 GO GSVA 1&#xff1a;获取注…

使用 JMeter 分布式性能测试

作为一个纯 JAVA 的GUI应用&#xff0c;JMeter 对于CPU和内存的消耗还是很惊人的&#xff0c;所以当需要模拟数以千计的并发用户时&#xff0c;使用单台机器模拟所有的并发用户就有些力不从心&#xff0c;甚至还会引起JAVA内存溢出的错误。不过&#xff0c;JMeter 也可以像 Loa…

LeetCode 面试题 16.26. 计算器

文章目录 一、题目二、C# 题解 一、题目 给定一个包含正整数、加()、减(-)、乘(*)、除(/)的算数表达式(括号除外)&#xff0c;计算其结果。 表达式仅包含非负整数&#xff0c;&#xff0c; - &#xff0c;*&#xff0c;/ 四种运算符和空格 。 整数除法仅保留整数部分。 示例 …

TikTok与媒体素养:如何辨别虚假信息?

在当今数字时代&#xff0c;社交媒体平台如TikTok已经成为信息传播和社交互动的主要渠道之一。然而&#xff0c;随之而来的是虚假信息的泛滥&#xff0c;这对用户的媒体素养提出了严峻的挑战。本文将探讨TikTok平台上虚假信息的现象&#xff0c;以及如何提高媒体素养&#xff0…