Redux 学习笔记01——Redux的简介和安装

466 阅读3分钟

写在前面

这篇博客记录的是我在学习Redux中的一些笔记,注意是Redux,而不是React-Redux。在你的Reac项目中,你应该权衡一下应该使用二者中的哪一个,后者虽然提供了便利,但是需要掌握额外的 API,并且要遵守它的组件拆分规范。我个人还是比较喜欢使用Redux,所以一下的笔记都是关于Redux的知识。

在这片博客中,我会从零介绍如何在React项目中使用Redux,也算是一个面向小白的入门教程,希望可以帮助到大家。

Redux 是什么

对于前端小白来讲,如果想要学习Redux,那么你很有可能已经学了一段时间的React.js,想要在React项目中使用Redux。于是你可能产生这样一个想法:Redux是React的一个附属品,或者是Redux包含于React中。

其实不然,Redux和React之间可以说没有任何关系,这完全就是两个框架。没有Redux,React依然可以活得好好的,可以发挥自己原有的作用,只不过在Redux的加持下,React项目会变得更加完善。

举个例子来说,React就像是一座图书馆,Redux就像是图书馆中的管理员。没有管理员,图书馆依然可以正常工作,你可以自己图书馆找书,借书,还书。但是在寻找书的过程中可能花费大量时间,在借书和还书的时候,需要自己在借书簿上面记录,非常不方便,而且容易出错。

但是有了管理员的帮助,你再去图书馆找书,就可以询问管理员,这本书在什么位置,然后很方便地找到这本书。在借书和还书的时候,只需要把书交给管理员,然后出示自己的借书卡,让管理员帮助我们完成登记的工作。这样对我们来说,既方便有准确,开开心心的享受管理员带来的服务。

参考这个例子,我再结合实际的React项目介绍一下Redux的作用。

你在学习React的时候会被告知:React是一个 视图层 的框架,在一个基于React的项目中,它的主要作用是为你应用的每一个状态设计简洁的视图,当数据改变时有效地更新并正确地渲染组件。但是React却不擅长管理数据,特别是组件之间的数据产地,比如项目中的组件结构如下:

如果这个时候组件4想和组件10进行数据传递,你需要先把数据从组件10传递给组件9,然后以此把数据传递给组件7、组件1、组件2、组件3,最终达到组件4。这中间的代码量和工作量可想而知。这还不是最糟糕的,最糟糕的是万一传递的数据出现了问题,你都不知道是哪一个组件造成的,还需要一个个的去调试。

在这个情况下,我们就需要一个方案来统一管理数据,在组件中直接引入需要的数据,并且使用统一的方式来修改数据。这个时候,Redux就排上用场了。如果我们在项目中使用Redux管理数据,那么你将体会到什么叫做清晰明了、简介方便。

说了这么多,相信你对Redux有了一个大致清晰的认识,下面我们就开始介绍如何具体的使用Redux吧。

Redux的安装

Redux是一个数据层的框架,想要使用Redux,需要在项目中安装,命令如下:

npm install --save redux

安装完成之后,我们就可以开始我们的Redux使用之旅了。