学习Redux刷新了我的前端App状态管理观
写在前面的话
为什么要使用Redux快双十一了,突然想到一个比喻来解释为什么会有React这类框架的存在,为什么我们要使用Redux,话说以前使用jQuery不也挺快乐的嘛。 一个比喻想想现代物流系统发展的不同阶段,我们寄一件东西的过程,
没错,没有物流系统时对应的就是以前使用jQuery的前端阶段,做一件事情很直接,如果只是送快递给一个特别近的人,那当然是非常方便。就算你要从北京送一个东西到上海,在这个阶段你也可以实现,但是需要付出的代价就太大了。 而出现了各大物流公司对应的就是使用React等框架的阶段,学习React需要付出成本,如果你只需要做简单的事情(比如说你想把东西送给你的邻居),那使用此类框架其实显得特别累赘,把简单的事情复杂化了,但是如果你想做复杂一点的事情(同时寄礼物给三个不同城市的人),那么选择快递公司是不会错的。 那么React和Redux的关系又该如何理解呢? 我觉得我们可以把
不同于顺丰每一次寄货都要那么高的价格,redux是一个学习一次,就可以免费寄货的优秀第三方快递系统,那我们当然要解散自己的物流公司来采用这个第三方的选择的。不过话说回来,学习是需要有成本的,所以是直接使用React还是学习Redux再使用,这是你一个你需要依据你自己项目的实际情况作出选择的事情。 不过这个例子可能并不足够合适,Redux做的不仅仅是管理原来React里state里面的状态。Redux其实可以接管我们的app里所有的数据。接下来我们具体看看Redux究竟做了什么。 Redux可以做什么我们常常听到一种说法,“Redux是一个非常好的状态管理器”,那究竟什么是状态呢。 重新理解前端中的状态想想我们平时看的网页,app,或者任何其它和我们有交互的东西,我们感觉到交互的发生是因为界面依据我们的行为作出了反馈,界面所有的改变,其实都可以看作是状态的改变,或者说界面会改变是因为我们的某个行为(事件)( 如此看来,无论是显示隐藏这种可见的状态,还是从服务器获取更多的数据,这些都可以看做是状态,而这些状态就是我们的Redux要管理的。 换一个可能比较专业一点的说法吧,状态包括
前端状态管理史为了更好的展示Redux的好,我们回顾一下前端的状态管理史(称为史其实并不合适,以下三种模式现在都有大量人在使用)。
(这里没有说到MVC等机制有兴趣的同学可以看这篇文章做进一步对比了解,基本观点是MVC固然很好,但是配合React使用时,性价比不是那么高了。) Redux是怎么管理状态的上面已经说了Redux管理状态特别好,那Redux究竟是如何管理状态的呢?状态分为UI State 和 API State,Redux针对这两部分也提供了两种方法
Redux的数据流还是用图片来说明更加清楚 下图说明了使用Redux管理状态为什么是可预测的 Redux的数据是如何流动的其实也是理解Redux的好处的关键部分之一,简单来说每个事件会发送一个action,action通过dispatch触发reduce,直接依据旧的state生成一个新state替代最顶层的store里面原有的state。 有一篇文章以漫画的形式把这个讲的特别透A Cartoon intro to redux 说了这么多使用redux管理状态的好处,但是你看到这里可能依旧不知道如何使用 开始学习Redux学习Redux前需要了解的基础知识如果你已经能很熟练的使用React,我觉得学习Redux需要了解的基础知识,你应该都已经了解了。具体说来主要有以下内容;
学习使用Redux网上关于Redux的教程特别多了(官方文档写的特别好),学习新概念是比较恼人的一个过程,所以我还是会对Redux提供的api做一个简洁的描述,然后我会把我这段时间看过的我觉得比较好的文章的链接放在下面以供大家参考。 Redux中的一些概念
let store = createStore( comReducer,applyMiddleware(thunk) );
配合 React 使用Redux需要掌握的一些概念redux只是管理状态的一种方法,真的用在React里,使用作者提供的一个工具
Redux参考文献官方文档(中文) What the Flux?! Let’s Redux. a-cartoon-intro-to-redux 官网推荐的经典文章列表 阮一峰的三篇教程 Redux还有一个非常酷的工具,让我们可以实时看到当前的state,使用redux不可不用啊。 学会使用还是得靠实践在弄懂了一些关键的核心概念以后,如果还是不知道怎么写,就模仿官方给的多个例子针对自己的需求敲写一次吧。模仿了两个例子就肯定明白了。 后言Redux也有自己的小生态,理解的一些技术辅助Redux更加方便的实现状态管理,其中有一些是下一步我特别想了解的比如说immutable-js,reselect,normalizr,当然因为学习了Redux,所以我也想对函数式编程做进一步理解,之前找到了一本非常好的关于函数式编程的书mostly-adequate-guide,分享给大家,大家一起学习。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |