redux和react-connect的简单理解

Posted Shmily-HJT

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的函数

 

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

以上是关于redux和react-connect的简单理解的主要内容,如果未能解决你的问题,请参考以下文章

redux简单使用

无法理解 Redux-thunk 中间件

简单用 React+Redux+TypeScript 实现一个 TodoApp

redux

redux和react-redux理解

[Redux/Mobx] 什么是redux?说说你对redux的理解?有哪些运用场景?