草庐IT

React中详解redux

公众号_前端每日技巧 2023-03-28 原文


redux

redux严格按照flux思想实现的一套框架,实现了单一数据流向。

组成部分
redux由四部分组成

action 组件发布的消息

store 存储消息的

reducers 捕获action,处理数据的方法

view 组件视图了

通信流程
一个组件发布action

action通过store被reducers捕获

reducers根据消息的类型处理数据

reducers将新的数据存储在store中

store将更新的数据传递给​​另一个组件​​了

注意:通信过程中,数据是作为state来存储了。

redux三大原则
单一数据源

整个应用中有且只能有一个store对象。

state是只读的

整个应用中的数据state是只读的,我们不能修改。我们可以通过getState方法获取state,但是不论是在组件中,还是在reducer中,我们不能直接修改state,在组件中,我们要发布action来修改state。

函数式编程

redux为了让我们开发更简单,建议我们采用函数式编程,也就是说每一个reducer都是一个函数,在函数中,我们更新state数据

体验redux
redux在设计之初,并不只是针对于react来设计了,希望能够在各个框架中使用,因此核心模块被抽象成可以公用的了,向在其他框架中使用,我们要安装相应的插件。

redux要在es6开发中使用,因此我们要安装该模块

npm install redux

redux模块提供了一些方法,供我们使用

redux方法
createStore 用来创建store的

参数是reducers方法

返回值是store对象

作用:存储应用程序的state数据

combineReducers 合并多个reducers

例如:使用路由的时候,可以通过该方法,合并路由的reducers

applyMiddleware 添加中间件

例如:在异步action中,添加中间件。

action
action就是一个消息对象,用来定义消息类型,和消息数据

通常用type表示消息类型(类型通常是不变,所以工作中要定义成常量)

数据部分属性名称没有限制,可以是任意的,例如data等等

reducers
用来接收action并处理的,类似观察者模式中的on方法,或者vuex中的mutations。

在redux中,被设计成一个函数

第一个参数表示state对象

第二个参数表示action对象

必须有返回值,就是更新的state数据

注意:如果state是引用类型的数据,一定要先复制再返回。

就是说要返回一个新的state对象。

当我们在创建store的时候,为了让state有默认值,会默认执行一次reducer,因此我们可以为state定义默认值并返回

store对象
dispatch 用来发布消息的(相当于观察者模式中trigger方法)

getState 获取state数据

replaceReducer 替代reducer

subscribe 监听state变化的

symbol symbol对象

举例:

// 引入redux
import { createStore } from 'redux';
// console.log(Redux);
// 消息名称定义成常量
const ADD = 'add';
const REMOVE = 'remove';
// 定义消息
let addNum = { type: ADD, num: 10 }
let removeNum = { type: REMOVE, num: 5 }
// 定义reduer
function reducer(state = 0, action) {
// console.log('reducer', state, action);
// 分析aciton类型
switch (action.type) {
case ADD:
// 值类型数据,可以直接修改
state += action.num;
break;
case REMOVE:
// 处理减少数字的消息
state -= action.num;
break;
}
// 必须有返回值,就是新的state
return state;
}
// 创建store, 传递reducer
let store = createStore(reducer);
// 查看store
console.log(store)
// 监听state变化, 一定要在执行之前监听
store.subscribe(res => console.log(store.getState()))
// 解构方法
let { dispatch } = store;
// 发布action
// store.dispatch(addNum)
dispatch(addNum)
dispatch(addNum)
dispatch(addNum)
dispatch(removeNum)

有关React中详解redux的更多相关文章

  1. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务,每x秒轮询一次队列,并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外,还有其他稳定的替代方案吗? 最佳答案 尽管启动基于Rails的持久任务是一种选择,但您可能希望查看更有序的系统,例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西,因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的,因为Rails上的启动时间通常为5-15秒,具体取决于您的硬件。不过,每天这样做几

  2. 物联网MQTT协议详解 - 2

    一、什么是MQTT协议MessageQueuingTelemetryTransport:消息队列遥测传输协议。是一种基于客户端-服务端的发布/订阅模式。与HTTP一样,基于TCP/IP协议之上的通讯协议,提供有序、无损、双向连接,由IBM(蓝色巨人)发布。原理:(1)MQTT协议身份和消息格式有三种身份:发布者(Publish)、代理(Broker)(服务器)、订阅者(Subscribe)。其中,消息的发布者和订阅者都是客户端,消息代理是服务器,消息发布者可以同时是订阅者。MQTT传输的消息分为:主题(Topic)和负载(payload)两部分Topic,可以理解为消息的类型,订阅者订阅(Su

  3. Tcl脚本入门笔记详解(一) - 2

    TCL脚本语言简介•TCL(ToolCommandLanguage)是一种解释执行的脚本语言(ScriptingLanguage),它提供了通用的编程能力:支持变量、过程和控制结构;同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发,脚本编程,GUI和测试等方面。•实际上包含了两个部分:一个语言和一个库。首先,Tcl是一种简单的脚本语言,主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的,因此在某种意义上我们又可以把TCL看作C库,这个库中有丰富的用于扩展TCL命令的C\C++过程和函数,所以,Tcl是

  4. ruby - 单个 EventMachine react 器中的多个服务器 - 2

    是否可以在单个事件机器中运行多个服务器?我的意思是,多个服务可以由一个客户端连接同时使用。例如,登录服务器对用户进行身份验证,然后用户可以同时使用聊天室和简单的游戏,例如带有单个客户端套接字的跳棋?或者我是否需要为每个服务使用多个事件机器react器? 最佳答案 我试过了,它正在工作:#!/usr/bin/envrubyrequire'eventmachine'moduleEchoServerdefpost_initputs"--someoneconnectedtotheechoserver!"enddefreceive_datad

  5. 【详解】Docker安装Elasticsearch7.16.1集群 - 2

    开门见山|拉取镜像dockerpullelasticsearch:7.16.1|配置存放的目录#存放配置文件的文件夹mkdir-p/opt/docker/elasticsearch/node-1/config#存放数据的文件夹mkdir-p/opt/docker/elasticsearch/node-1/data#存放运行日志的文件夹mkdir-p/opt/docker/elasticsearch/node-1/log#存放IK分词插件的文件夹mkdir-p/opt/docker/elasticsearch/node-1/plugins若你使用了moba,直接右键新建即可如上图所示依次类推创建

  6. 【Elasticsearch基础】Elasticsearch索引、文档以及映射操作详解 - 2

    文章目录概念索引相关操作创建索引更新副本查看索引删除索引索引的打开与关闭收缩索引索引别名查询索引别名文档相关操作新建文档查询文档更新文档删除文档映射相关操作查询文档映射创建静态映射创建索引并添加映射概念es中有三个概念要清楚,分别为索引、映射和文档(不用死记硬背,大概有个印象就可以)索引可理解为MySQL数据库;映射可理解为MySQL的表结构;文档可理解为MySQL表中的每行数据静态映射和动态映射上面已经介绍了,映射可理解为MySQL的表结构,在MySQL中,向表中插入数据是需要先创建表结构的;但在es中不必这样,可以直接插入文档,es可以根据插入的文档(数据),动态的创建映射(表结构),这就

  7. 最强Http缓存策略之强缓存和协商缓存的详解与应用实例 - 2

    HTTP缓存是指浏览器或者代理服务器将已经请求过的资源保存到本地,以便下次请求时能够直接从缓存中获取资源,从而减少网络请求次数,提高网页的加载速度和用户体验。缓存分为强缓存和协商缓存两种模式。一.强缓存强缓存是指浏览器直接从本地缓存中获取资源,而不需要向web服务器发出网络请求。这是因为浏览器在第一次请求资源时,服务器会在响应头中添加相关缓存的响应头,以表明该资源的缓存策略。常见的强缓存响应头如下所述:Cache-ControlCache-Control响应头是用于控制强制缓存和协商缓存的缓存策略。该响应头中的指令如下:max-age:指定该资源在本地缓存的最长有效时间,以秒为单位。例如:Ca

  8. IDEA 2022 创建 Spring Boot 项目详解 - 2

    如何用IDEA2022创建并初始化一个SpringBoot项目?目录如何用IDEA2022创建并初始化一个SpringBoot项目?0. 环境说明1.  创建SpringBoot项目 2.编写初始化代码0. 环境说明IDEA2022.3.1JDK1.8SpringBoot1.  创建SpringBoot项目        打开IDEA,选择NewProject创建项目。        填写项目名称、项目构建方式、jdk版本,按需要修改项目文件路径等信息。        选择springboot版本以及需要的包,此处只选择了springweb。        此处需特别注意,若你使用的是jdk1

  9. 详解Unity中的粒子系统Particle System (二) - 2

    前言上一篇我们简要讲述了粒子系统是什么,如何添加,以及基本模块的介绍,以及对于曲线和颜色编辑器的讲解。从本篇开始,我们将按照模块结构讲解下去,本篇主要讲粒子系统的主模块,该模块主要是控制粒子的初始状态和全局属性的,以下是关于该模块的介绍,请大家指正。目录前言本系列提要一、粒子系统主模块1.阅读前注意事项2.参考图3.参数讲解DurationLoopingPrewarmStartDelayStartLifetimeStartSpeed3DStartSizeStartSize3DStartRotationStartRotationFlipRotationStartColorGravityModif

  10. VMware虚拟机与本地主机进行磁盘共享(详解) - 2

    VMware虚拟机与本地主机进行磁盘共享前提虚拟机版本为Windows10(专业版,不是可能有问题)本地主机为家庭版或学生版(此版本会有问题,但有替代方式)最好是专业版VMware操作1.关闭防火墙,全部关闭。2.打开电脑属性3.点击共享-》高级共享-》权限4.如果没有everyone,就添加权限选择完全控制,然后应用确定。5.打开cmd输入lusrmgr.msc(只有专业版可以打开)如果不是专业版,可以跳过这一步。点击用户-》administrator密码要复杂密码,否则不行。推荐admaiN@1234类型的密码。设置完密码,点击属性,将禁用解开。6.如果虚拟机的windows不是专业版,可

随机推荐