redux和react-connect的简单理解

最近一直被redux和react的连接给困扰,现在终于感觉自己在混乱中摸到了一点点混头,说一下自己的心得体会和理解

我们知道通过react的state状态的改变可以及时渲染我们views显示页面,redux的引入,又来一个全然的陌生的state,于是乎,兜兜转转,转转兜兜,一直原地盘旋。

理一理思路:

1、什么是redux?

我的理解很简单:他通过store统一管理创建了一个全局的state,这个state可以被任何的地方的views层所获取所进行变动,让我们避开组件之间state(react中的state)相互传递的困扰。既然有了store来统一所有的state,总要有大动作去更新这个state吧。action就是用来说明如何更新,那reducer又是用来干嘛的呢?你action说明了如何更新,需要一辆小汽车运载到store中去执行更新啊!所以reducer就是这辆小汽车载着action来到store身旁完成state的更新

2、redux的stade更新了,我react怎么得知并完成渲染呢?

主角来了,connect,他就是连接redux和react的纽带,既然是纽带,那肯定有redux的state向react输出(通俗点就是react获取redux中的state),也有react向redux的输入嘛(通俗一点就是react中用户执行了某项操作,让redux的state相应进行更新),这个时候mapStateToProps()和mapDispatchToProps()闪亮登场

mapStateToProps():我理解得比较直白,react用来获取redux的state的函数。

mapDispatchToProps():我理解得也比较直白,用户执行了某项操作,react告诉redux如何更新state的函数

这样一个体系下,就能实现一直困扰我们的问题,至于具体怎么用,自行百度,能增加大家的印象,这里仅提供一个理解的思路

原文地址:https://www.cnblogs.com/Shmily-HJT/p/8178469.html

时间: 2024-10-10 17:31:00

redux和react-connect的简单理解的相关文章

理解 React,但不理解 Redux,该如何通俗易懂的理解 Redux?

作者:Wang Namelos链接:https://www.zhihu.com/question/41312576/answer/90782136来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. . React有props和state: props意味着父级分发下来的属性,state意味着组件内部可以自行管理的状态,并且整个React没有数据向上回溯的能力,也就是说数据只能单向向下分发,或者自行内部消化.理解这个是理解React和Redux的前提.2. 一般构建的R

理解 React,但不理解 Redux,该如何通俗易懂的理解 Redux?(转)

作者:Wang Namelos 链接:https://www.zhihu.com/question/41312576/answer/90782136来源:知乎 解答这个问题并不困难:唯一的要求是你熟悉React.不要光听别人描述名词,理解起来是很困难的.从需求出发,看看使用React需要什么:1. React有props和state: props意味着父级分发下来的属性,state意味着组件内部可以自行管理的状态,并且整个React没有数据向上回溯的能力,也就是说数据只能单向向下分发,或者自行内

Redux 和React 结合

当Redux 和React 相接合,就是使用Redux进行状态管理,使用React 开发页面UI.相比传统的html, 使用React 开发页面,确实带来了很多好处,组件化,代码复用,但是和Redux 接合时,组件化却也带来了一定的问题,组件层层嵌套,有成千上百个,而store确只有一个,组件中怎么才能获取到store?  页面UI就是显示应用程序状态的,如果获取不到store中的state, 那就没法渲染内容了.还有一个问题,就是如果状态发生了变化,组件怎么做到实时监听,实时显示最新的状态?

Http协议与TCP协议简单理解

在C#编写代码,很多时候会遇到Http协议或者TCP协议,这里做一个简单的理解. TCP协议对应于传输层,而HTTP协议对应于应用层,从本质上来说,二者没有可比性.Http协议是建立在TCP协议基础之上的,当浏览器需要从服务器获取网页数据的时候,会发出一次Http请求.Http会通过TCP建立起一个到服务器的连接通道,当本次请求需要的数据完毕后,Http会立即将TCP连接断开,这个过程是很短的.所以Http连接是一种短连接,是一种无状态的连接.所谓的无状态,是指浏览器每次向服务器发起请求的时候,

php类的封装、继承和多态的简单理解

.面象对向的三大特点:封装性.继承性.多态性 首先简单理解一下抽象: 我们在前面定义一个类的时候,实际上就是把一类事物共有的属性和行为提取出来,形成一个物理模型(模版),这种研究问题的方法称为抽象 一.封装性  封装就是把抽取出来的数据和对数据的操作封装在一起,数据被保护在内部,程序的其他部分只有被授权的操作(方法)才能对数据进行操作.  php提供了三种访问控制修饰符  public 表示全局,本类内部,类外部,子类都可以访问  protected 表示受保护的,只有本类或子类可以访问  pr

简单理解计算机通信

简单理解计算机通信 写在前面: 在计算机刚出现的时候,只能在本机进行一些运算处理,想将一台计算机中的数据转移到另一台计算机中,需要通过外部存储介质来传输,例如磁带.软盘.而网络技术的出现,使得计算机间可以通过一些传输介质(网线.光纤等),实现快速的数据传输和信息交互.如今,网络已无处不在,那么,计算机之间究竟是如何通信的呢?下面会通过一些基础的网络知识来简单理解计算机之间的通信过程. 网络通信模型: 网络通信模型是一种概念模型和框架,旨在使各种计算机在世界范围内互连为网络.其中有OSI七层模型和

回溯法之八皇后问题简单理解

回溯法,简单理解就是有源可溯.基本思想要借鉴穷举法,但是它不是一味地穷举,当发现某一步不符合条件时,这一步后面的穷举操作就不进行了(俗称“剪枝”),我自己把它叫做动态穷举法.假设第一个步骤可行,那么执行第二个步骤,第三个......如果其中第三个步骤不行,那么我们再回过来(回溯),第二个步骤换一种方法尝试,然后再重新第三个步骤,第四个......直到完成任务要求为止. 这里,以八皇后问题为例.试图把回溯法讲清楚. 注意:递归应该是一种算法结构,回溯法是一种算法思想. 何为八皇后问题? (百度百科

Javascript闭包简单理解

提到闭包,想必大家都早有耳闻,下面说下我的简单理解.说实话平时工作中实际手动写闭包的场景并不多,但是项目中用到的第三方框架和组件或多或少用到了闭包.所以,了解闭包是非常必要的.呵呵... 一.什么是闭包简而言之,就是能够读取其他函数内部变量的函数.由于JS变量作用域的特性,外部不能访问内部变量,内部可以外部变量. 二.使用场景1. 实现私有成员.2. 保护命名空间,避免污染全局变量.3. 缓存变量. 先看一个封装的例子: var person = function () { // 变量作用域为函

对数据类型封装和数据抽象的简单理解

请特别关注程序设计技术,而不是各种语言特征. --<C++程序设计语言> Bjarne Stroustrup 本文是<C++程序设计语言>(Bjarne Stroustrup )的第二章的读书笔记,例子来源于这本书的第二章. 在程序设计之中,我们倾向于将数据结构(也可以说是数据类型)以及一组对其操作的相关过程组织在一起,在逻辑上可以称将其为模块.此时程序分为一些模块,模块包括一组对数据的操作,数据隐藏于模块之中.以下以栈的设计为例,使用C和C++进行设计,简单理解模块化设计中的数据