react redux 状态管理

news2025/1/13 14:09:06

1.store

store是一个状态管理容器,它通过createStore创建,createStore接收initialState和reducer两个参数。它暴露了4个api分别是:

getState()
dispatch(action)
subscribe(listener)
replaceReducer

前三个是比较常用的api,之后我们会来模拟实现一个createStore这个函数。

2.action

在redux思想中view的变化由action发出通知,action是一个包含type的简单对象,在redux思想中改变state的唯一方法就是触发action

3.dispatch

dispatch用来处理action,并传递给reducer,继而更新应用状态

4.reducer

Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。
在React中使用redux的数据流向如图所示:

在这里插入图片描述

结构如下

在这里插入图片描述
store.js

import { createStore } from 'redux'
import { rootReducer } from './reducer/index';

const store = createStore(rootReducer)

export default store;

action/index.js

/**
 * action 构建函数
 */
export const sendAction = (obj) => {
  // console.log(obj);
  // 需要返回一个action对象,该action对象需要包括type等属性
  return {
    type: 'send-action',
    value: '这是一个action'
  }
}

redecer/index.js

/**
 * 该文件是创建reducer函数,专门用于处理发送过来的action
 */

const initState = {
  value: '默认值'
}
// 函数需要传递两个参数:state,action
const rootReducer = (state = initState, action) => {
  // 根据aciton中的type字段判断是否为发送过来的action,如果是则返回一个新的state
  switch (action.type) {
    case 'send-action':
      return Object.assign({}, state, action)
    default:
      return state
  }
}
export {
  rootReducer
};

项目中使用
…未完待续

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

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

相关文章

葡萄糖-聚乙二醇-二茂铁Ferrocene-PEG-Glucose

葡萄糖-聚乙二醇-二茂铁Ferrocene-PEG-Glucose,二茂铁,是一种具有芳香族性质的有机过渡金属化合物,化学式为Fe(C5H5)2,常温下为橙黄色粉末,有樟脑气味。熔点172℃-174℃,沸点249℃,100℃以上能升…

腾讯云服务器+宝塔+后端+前端发布

1、申请云服务器。登陆。 https://cloud.tencent.com/ 创建实例 最好重置密码,并记住。 配置安全组,当我们是学习的时候,全部开放好了。 有些版本是去“防火墙”那里配置。 轻量应用服务器(试用的) 2、安装Docker。在…

Oracle LiveLabs实验:Load and Analyze Your Data with Autonomous Database

概述 本研讨会中的实验将引导您完成开始使用 Oracle 自治数据库的所有步骤。 首先,您将创建一个 Oracle 自治数据库实例。 然后,您将练习使用自治数据库工具和 API 从不同位置以不同格式加载数据的几种方法。 您将使用 SQL 分析数据并使用 Oracle Analy…

ShardingSphere笔记(二):自定义分片算法 — 按月分表

ShardingSphere笔记(二):自定义分片算法 — 按月分表 文章目录ShardingSphere笔记(二):自定义分片算法 — 按月分表一、准备二、分表逻辑三、自定义分片算法步骤(以按月分表为例)1. …

【AI工程】08-MLOps工具-在Charmed Kubeflow上运行MindSpore

作者:王磊 更多精彩分享,欢迎访问和关注:https://www.zhihu.com/people/wldandan 在【AI工程】02-AI工程(AI Engineering)面面观中,提到Gartner把AI工程化作为未来重要战略技术趋势,Gartner认为…

关于webpack(v5.74.0)的模块联邦原理

在webpack中模块联邦的实现主要依赖于两个插件ContainerReferencePlugin和ContainerPlugin,ContainerPlugin是用来添加入口依赖并给当前依赖添加异步依赖,ContainerReferencePlugin用来添加解析用户的请求并分析是否是远程模块,然后加载远程模…

使用 JPA、Hibernate 和 Spring Data JPA 进行审计

1. 概述 在ORM的上下文中,数据库审计意味着跟踪和记录与持久实体相关的事件,或者只是实体版本控制。受 SQL 触发器的启发,这些事件是对实体的插入、更新和删除操作。数据库审核的好处类似于源版本控制提供的好处。 在本教程中,我…

Shelby American 汽车 NFT 系列来袭!

我们在 The Sandbox 上推出 Shelby NFT 作品集,加入我们吧!该系列包含 Carroll Shelby 制造的一些最稀有和最抢手的汽车,也是现实生活中最具收藏价值的汽车。这些汽车构成了最伟大的汽车历史,也是传奇人物 Carroll Shelby 的伟大代…

为什么开源在线表单工具能做好数据管理?

在数字化时代,数据的有效应用和管理可以说是企业的无形资产,做好数据管理既能提升办公效率,又能帮助企业从规律的数字化管理中获取高效的管理策略。那么,什么样的开源在线表单工具可以实现这一目的?对于企业而言&#…

Axure药企内部管理平台+企业内部管理系统平台

这是一款根据药企的需求设计的内部管理系统,此系统主要是针对市场部和销售部的管理,此作品选择了管理员和地区经理两个角色进行了设计, 设计软件:Axure8.1(兼容9和10) 作品类型:实战原型 其主要…

抓包神器之Charles(绕过代理屏蔽)以及证书校验绕过

简介 大多数进行渗透测试的时候都可以使用burp抓包,但有的app的部分功能会使用okhttp框架,这种框架会使App不使用默认的系统代理,解决方法就是通过proxy的方式走charles,下面是具体使用方法; Charles 是常用的网络封包截取工具, 通过将自己设置成系统的网络访问代{过}{…

11.21SSM-spring 第一天学习总结

1 Spring 是什么? 针对Bean 生命周期进行管理的轻量级容器 IOC : 浅谈IOC--说清楚IOC是什么_ivan820819的博客-CSDN博客_ioc 软件设计六大原则 : 设计模式六大原则 六大设计原则 1.开闭原则 定义:一个软件实体如类、模块和函数应该对扩展开放&a…

JavaScript/uni-app对接海康ISC openapi

JavaScript/uni-app对接海康ISC openapiJavaScript实现HMAC SHA256下载安装使用crypto-js使用签名生成工具参考JavaScript实现HMAC SHA256 Run the code online with this jsfiddle. Dependent upon an open source js library calledhttp://code.google.com/p/crypto-js/.<…

如何将驱动编译为kernel 模块

前言&#xff1a; 本文章目标平台是PC Linux,不包含其他平台。 执行下面的步骤之前&#xff0c;请先编译kernel通过。 linux KO编译 将驱动程序源码集成到Linux内核中&#xff1a; 将驱动源码文件放到drivers/net/wireless并命名 自己简单创建的几个没有任何关联的源文件&…

力扣(LeetCode)30. 串联所有单词的子串(C++)

滑动窗口哈希表 哈希表 tottottot 存 wordswordswords 所有单词的出现次数。 维护滑动窗口&#xff0c;窗口长度 mwm\times wmw &#xff0c; mmm 是单词数量 www是单词长度 &#xff0c; 窗口长度对应可行解的长度。哈希表 wdwdwd 维护滑动窗口内每个单词的出现次数。 维护…

jstack问题定位分析

目录 1、jstack是什么 2、jstack的使用 1、jstack是什么 jstack是java虚拟机自带的一种堆栈跟踪工具。jstack用来打印出给定的java进程ID或者core file或者远程调试服务的java堆栈信息。 主要是用于生成java虚拟机当前时刻的线程快照&#xff0c;线程快照是当前java虚拟机…

记录运行项目的一些报错

一、git pull 报错 There is no tracking information for the current branch. Please specify whic... There is no tracking information for the current branch.Please specify which branch you want to merge with.See git-pull(1) for detailsgit pull <remote>…

身份安全的零信任方法

一、什么是零信任&#xff1f; 零信任是一组不断发展的网络安全范例术语&#xff0c;它将组织的防御措施从静态的、基于网络的边界转移到关注用户、资产和资源。这是一种安全心态&#xff0c;在明确验证之前&#xff0c;每个传入连接都被视为潜在的恶意请求。这个概念是由世界…

【特征选择】基于二元多邻域人工蜂群 (BMNABC) 特征选择问题(Matlab代码实现)

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客 &#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜…

1.EdgeX实战 Ubuntu18.04搭建运行环境

文章目录前言:1、搭建Ubuntu18.04服务器平台2、安装docker和docker-compose3、运行EdgeX4、使用浏览器访问EdgeX前言: 想着把之前arduino和树莓派搭建的物联网平台迁移到EdgeX上来&#xff0c;原因有二&#xff1a; 不想去造轮子&#xff0c;自己从零开始写一个物联网的框架&…