本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。ang.net实际上，flux和mobx都是一种观察者未经授权，禁止复制转载。未经授权，禁止复制转载。模式的实现，只不过flux将数据管理更加原创内容，盗版必究。【原创内容，转载请注明出处】抽象出来，比简单的订阅-发布模式更加复杂本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net，而mobx则相对而言更加贴近订阅-发布未经授权，禁止复制转载。原创内容，盗版必究。模式，因此使用起来更加简单，当然，有那么本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】一句话，使用起来简单的东西，实现起来更复【版权所有，侵权必究】【本文首发于唐霜的博客】杂。相信两者都还有更长的路要走。
【转载请注明来源】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【版权所有，侵权必究】
Redux和MobX是前端领域最前沿的两【转载请注明来源】【作者：唐霜】个状态管理library，前者遵循Flu【原创内容，转载请注明出处】未经授权，禁止复制转载。x思想，后者独树一帜，不过可以认为继承了【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。observer思想。在具体本文的阐述前【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】，让我们通过对这两种思想的简单讨论，来感【作者：唐霜】著作权归作者所有，禁止商业用途转载。受前端数据（状态）管理的复杂局面。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshua原创内容，盗版必究。【本文首发于唐霜的博客】ngnet】本文版权归作者所有，未经授权不得转载。Flux vs. MobX
首先需要指出的是，“数据（data）”和【作者：唐霜】【未经授权禁止转载】“状态（state）”是不同的概念，但由未经授权，禁止复制转载。【本文首发于唐霜的博客】于很多人对此只是心知肚明，所以就混用。在本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】下一节我将专门探讨一下这个概念之分。总之本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。，在讨论redux和mobx领域，你看到【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。的“数据”其实都是指“状态”的概念，当然转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。，有些状态是直接对数据的引用。
转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。ng.net原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】ng.netflux的思想中，对于一个应用它需要有一本文版权归作者所有，未经授权不得转载。【转载请注明来源】个或多个store来存储状态，redux【本文首发于唐霜的博客】【版权所有，侵权必究】为了简化，统一为只有一个store。
著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netng.net一个state对应来一个前端界面，这是一本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。种新的思想，在angular的时代，我们著作权归作者所有，禁止商业用途转载。【作者：唐霜】强调数据驱动界面，但在react时代，驱【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】动界面但是state，而实际上，stat【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】e同时包含来对数据对引用和其它一些信息，本文作者：唐霜，转载请注明出处。原创内容，盗版必究。比如你选择过了某个选项，界面就应该呈现出本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net选中该选项对效果。特别是一个dialog【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】，如果它的state中的isShow是t【原创内容，转载请注明出处】【原创内容，转载请注明出处】rue，就应该显示出来，如果是false未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。自然应该隐藏起来。所以说，把显示界面的全未经授权，禁止复制转载。【版权所有，侵权必究】部代码（component）当作一个纯函【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net数，输入一个state，它每次输出的界面转载请注明出处：www.tangshuang.net【转载请注明来源】都是相同的。这种思想自然要比前一个时代更本文作者：唐霜，转载请注明出处。原创内容，盗版必究。贴近真实。
【原创内容，转载请注明出处】【关注微信公众号：wwwtangshua本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。ngnet】store中存储了state，一个固定的【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。state对应一个固定的界面，当stor本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】e中的state发生改变时，界面也应该随【作者：唐霜】本文作者：唐霜，转载请注明出处。之改变。现在的问题是，谁来将state存【本文首发于唐霜的博客】未经授权，禁止复制转载。入store，谁来修改store中的st【原创不易，请尊重版权】【未经授权禁止转载】ate。在flux中，由action触发【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netdispatcher来将state写入或【原创不易，请尊重版权】【未经授权禁止转载】修改入store中：
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。 【作者：唐霜】【本文受版权保护】【本文首发于唐霜的博客】
redux的store使用dispatc著作权归作者所有，禁止商业用途转载。【作者：唐霜】h方法来传递action，而dispat原创内容，盗版必究。未经授权，禁止复制转载。cher修改store是通过reduce【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。r，通过subscribe方法让开发者自【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。己控制当state发生变化时如何更新vi本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。ew。因此，redux是完全安装flux【本文首发于唐霜的博客】【本文首发于唐霜的博客】的思想实现的。
【转载请注明来源】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。ang.net【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。ang.net现在让我们来看下MobX的思想。
未经授权，禁止复制转载。【作者：唐霜】【本文受版权保护】【作者：唐霜】MobX也是管理状态，但是并不存在一个固本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。定的store，它不需要store来存储【版权所有，侵权必究】【未经授权禁止转载】所有的状态信息，你需要一个store时，【关注微信公众号：wwwtangshuangnet】【转载请注明来源】立即通过一个observable方法封装一个state，就得到一个可被监【未经授权禁止转载】【未经授权禁止转载】控的state，这个state实际上被放【版权所有】唐霜 www.tangshuang.net【本文受版权保护】在mobx的一个store中，你可以像普【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】通的js对象一样，对这个state进行修原创内容，盗版必究。【转载请注明来源】改，而在修改时，store自动发生触发v【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】iew的变化。这个过程里面你会发现，相比本文版权归作者所有，未经授权不得转载。【本文受版权保护】于flux，少来action和dispa著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。tcher这两个环节。虽然我们也对sta【作者：唐霜】原创内容，盗版必究。te进行来修改，但是这个修改不是通过st【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】ore的方法实现的，而是我们自己像修改一【作者：唐霜】原创内容，盗版必究。个js对象一样随意改的。当然，mobx内【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。部由于observer机制，是可以知道你转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】进行来修改的，所以，当你修改的时候，st【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】ore就会通知view进行对应的改动。当【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】然，这里一个state对应一个view的【作者：唐霜】【关注微信公众号：wwwtangshuangnet】原则是一样的。
MobX状态控制示意图（来源）这里需要注意的是“Action”并不是原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netmobx的某个动作或元素，而是指开发者自著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。己像修改js对象一样修改经过observ【本文首发于唐霜的博客】【版权所有，侵权必究】able函数包装过的那个state，而“【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。State”就是指这个被包装过的，或者说【转载请注明来源】【未经授权禁止转载】，被包装过的才叫state，不然只是个普著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。通的js对象。
【作者：唐霜】本文版权归作者所有，未经授权不得转载。【本文受版权保护】MobX的思想，建立这一个东西上，那就是著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。observer，即state是可以被观本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】察的，当像修改js对象一样修改state著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。的时候，store是可以知道具体哪里被修【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】改来的。而store修改views是通过转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】observer方法实现的。因此，我称m【原创不易，请尊重版权】【原创内容，转载请注明出处】obx的思想叫observer思想。
转载请注明出处：www.tangshua【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。ng.net
从两种思想的使用上讲，显然mobx的使著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。用方法简单的多，但是对于使用者而言，mo本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】bx的理解成本要更大一些，使用时遇到的坑【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】也可能更多。
总之，这两种思想是目前市面上对状态管理的【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。主流思想，MVC或者MVVM基本上已经被未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net打败了。
本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】一个数据管理器的核心需求
但是，我们要讨论的，是如何来管理我们的数【本文首发于唐霜的博客】未经授权，禁止复制转载。据，而非状态，我相信上面两种思想已经是解【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】决状态问题的最好方案了。在讨论数据管理器本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】之前，我们还是讨论一下data和stat著作权归作者所有，禁止商业用途转载。【本文受版权保护】e的区别，以避免在下文的阐述中你会反复问【转载请注明来源】本文版权归作者所有，未经授权不得转载。“已经有redux了，我为嘛还要一个数据本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net管理器”这样的问题。
【原创内容，转载请注明出处】【转载请注明来源】“数据”和“状态”的区别
其实区别是显而易见的，只是我们不愿意去承未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net认。数据是我们从服务端取回，或本地已经准【转载请注明来源】【未经授权禁止转载】备好的固定格式的静态内容结构。注意“静态”这个词，它的意思是【本文受版权保护】【转载请注明来源】，一份数据，对于我们的应用而言，是不变的【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。，你可以使用它，也可以在知道有新的数据可本文版权归作者所有，未经授权不得转载。【本文受版权保护】以代替它时把它丢掉。
【本文首发于唐霜的博客】【原创内容，转载请注明出处】转载请注明出处：www.tangshua原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。ng.net从server side取回数据是我们要【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】讨论的唯一话题，我们不考虑本地存储的数据原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】的问题，因为本地存储的数据对应一个地址，【作者：唐霜】【作者：唐霜】它们两个都永远不会变。而服务端的一个地址著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】，对应的数据却偶尔会变。因此，我们要关注本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。的是后者。但是对数据的概念本身而言，一份【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】数据一旦获得之后，就不会改变了，会改变的【作者：唐霜】【作者：唐霜】，是从同一个地址取回的两次数据不同这个变本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。化。
未经授权，禁止复制转载。【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。et 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】而状态则是随时可以发生变化的内容结构。我原创内容，盗版必究。【作者：唐霜】都可以不用多解释你就可以理解，比如点击一【原创内容，转载请注明出处】未经授权，禁止复制转载。个按钮，状态从display变为hidd未经授权，禁止复制转载。【未经授权禁止转载】en。
本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【版权所有，侵权必究】【访问 www.tangshuang.n【原创不易，请尊重版权】【版权所有，侵权必究】et 获取更多精彩内容】为什么有了redux/mobx还需要datamanager
状态可以对某一份数据进行引用，这样，似乎未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。状态管理器也可以对数据进行管理了。而且对未经授权，禁止复制转载。【版权所有，侵权必究】于一个application而言，如果要【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。求整个应用的所有界面都由state决定，转载请注明出处：www.tangshuang.net原创内容，盗版必究。那么把数据作为状态的一部分也是理所当然的【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。。然而，假如我们使用mobx呢，我们很难未经授权，禁止复制转载。原创内容，盗版必究。说将整个application的状态交给本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。一个store去管理，要知道整个界面的状转载请注明出处：www.tangshuang.net【本文受版权保护】态集合之大，到最后一定会逼近无法管理的零【版权所有，侵权必究】【原创内容，转载请注明出处】界点。
【本文受版权保护】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。另一种想法是，我们的applicatio本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。n不是由单一的技术开发完的，一个框架解决本文作者：唐霜，转载请注明出处。原创内容，盗版必究。一类问题，如果同一个界面出现了两个不同技【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。术实现的components，那么可能存【原创不易，请尊重版权】【本文首发于唐霜的博客】在一种情况，它们可能并不依赖同一个sta【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】te，却可能依赖同一个data。这种ca【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】se导致我们需要有一种机制，保证它们两个【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。使用同一个数据，请求数据不会重复发生，当【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。一个component请求到最新的数据时原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net，另一个component应该自动使用这【版权所有，侵权必究】【转载请注明来源】个最新的数据。
【关注微信公众号：wwwtangshua【转载请注明来源】本文作者：唐霜，转载请注明出处。ngnet】【转载请注明来源】【原创内容，转载请注明出处】未经授权，禁止复制转载。总之，这里要说的就是，当redux/mo著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】bx无法适应对单纯数据管理的需求时，我们本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。需要一个datamanager。
本文作者：唐霜，转载请注明出处。【本文受版权保护】原创内容，盗版必究。【版权所有，侵权必究】datamanager的基本功能需求
从功能上我们来看datamanager它转载请注明出处：www.tangshuang.net原创内容，盗版必究。应该包含什么样的需求。
【未经授权禁止转载】【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。ngnet】首先是数据存储。它把涉及到的相关应用的数【本文受版权保护】【作者：唐霜】据统一存放，有需要，都从我这里取，不需要【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。自己管理数据，甚至如果你需要对原始数据进本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】行一定的格式转化，也可以交给我来处理。
【未经授权禁止转载】原创内容，盗版必究。【本文受版权保护】【原创内容，转载请注明出处】其次是获取数据。应用只需要非常简单的方法原创内容，盗版必究。转载请注明出处：www.tangshuang.net就可以从我这里得到它想要的数据，当然，如原创内容，盗版必究。转载请注明出处：www.tangshuang.net果我这里确实还没有这个数据，只能返回un【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】defined，但是这个时候我可以马上去本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。取，以防止你下次来取时我还没有。但是对于本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。使用者而言，它不需要关心这些，它只需要知未经授权，禁止复制转载。【版权所有，侵权必究】道如何从我这里获取数据，有就得到，没有就【转载请注明来源】本文作者：唐霜，转载请注明出处。得到一个undefined。
【版权所有】唐霜 www.tangshu【转载请注明来源】未经授权，禁止复制转载。ang.net【作者：唐霜】【版权所有】唐霜 www.tangshu【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ang.net最后是获得通知。应用第一次通过get方法未经授权，禁止复制转载。未经授权，禁止复制转载。去datamanager取数据的时候如果未经授权，禁止复制转载。【未经授权禁止转载】没有得到想要的数据，那么当dataman【版权所有，侵权必究】原创内容，盗版必究。ager从服务端取回数据保存起来之后，应【作者：唐霜】【版权所有】唐霜 www.tangshuang.net该有一个机制，告诉刚才来取数据的应用数据未经授权，禁止复制转载。【原创不易，请尊重版权】已经有了，你可以再次来取（还是用get方【原创不易，请尊重版权】【转载请注明来源】法来取）。
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。至于你得到数据之后，你要干什么我们一概不【原创不易，请尊重版权】【原创不易，请尊重版权】管，你是用来更新views还是怎么办，都转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】不是我们要管理的内容。这是和state管本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】理器巨大的不同，statemanager【未经授权禁止转载】原创内容，盗版必究。必须要确保state和views的一致性【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。，而datamanager完全不管vie著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】ws。
【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】ng.net总结起来，我们可以通过下面一张图来解释d【本文首发于唐霜的博客】【作者：唐霜】atamanager：
转载请注明出处：www.tangshua【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netng.net未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。
datamanager的数据管理模型
转载请注明出处：www.tangshua【本文受版权保护】转载请注明出处：www.tangshuang.netng.net【本文首发于唐霜的博客】和flux、mobx思想比起来，由于da【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。ta是静态的，因此没有被修改的概念。但是【版权所有，侵权必究】【未经授权禁止转载】同一个地址对应的data是会被修改的，是【版权所有】唐霜 www.tangshuang.net【转载请注明来源】在request请求完成之后被修改的。每【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】一次datamanager发起reque【作者：唐霜】【版权所有】唐霜 www.tangshuang.netst，都可能得到新的数据，把老数据替换掉未经授权，禁止复制转载。【版权所有，侵权必究】。
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。datamanager的实现思想
如文章标题，我们通过对flux和mobx【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net思想的结合，实现我们想要的dataman【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】ager。
【本文首发于唐霜的博客】【未经授权禁止转载】原创内容，盗版必究。register
对于应用而言，需要告诉datamanag【本文首发于唐霜的博客】【未经授权禁止转载】er我想要从哪个url获取数据，获取的方本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。法是什么，当我准备get这个数据时，希望未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net你做什么样的transform。注册数据未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】源，基于这个数据源，应用才可以做get和本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。be notified相关的操作，否则是【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】无源之水。
【原创内容，转载请注明出处】【作者：唐霜】转载请注明出处：www.tangshua【转载请注明来源】【版权所有，侵权必究】ng.net【原创不易，请尊重版权】对应flux，我们需要创建一个store原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。，没有store后续什么都没有。
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ng.netsubscribe
应用订阅一个数据在请求发生后的变化通知，原创内容，盗版必究。【转载请注明来源】当数据请求结束后，datamanager【原创内容，转载请注明出处】【作者：唐霜】中存放的这个datasource的数据如【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】果发生变化，那么应该通知应用程序。
【关注微信公众号：wwwtangshua【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】ngnet】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。这对应的，是redux里面的subscr【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netibe方法，虽然datamanager不【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。负责view的任何东西，但是注册回调机制本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】是必须有的。在回调函数中应用自己去决定要【原创内容，转载请注明出处】原创内容，盗版必究。做什么。
【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【作者：唐霜】本文版权归作者所有，未经授权不得转载。get
获取数据，通过该方法获取数据，没有数据就本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】返回一个undefined。
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。补充：
转载请注明出处：www.tangshua【未经授权禁止转载】未经授权，禁止复制转载。ng.net原创内容，盗版必究。有童鞋反应，get的使用让人比较难理解。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。确实，这需要从传统的request的思想【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。中转换过来。为了提供一种过渡，我在最新版著作权归作者所有，禁止商业用途转载。【转载请注明来源】的datamanger中加入了request方法，它的职责与get不同，主要是用来返转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net回一个promise，这样在编程上和ge【作者：唐霜】原创内容，盗版必究。t形成两个体系，开发者如果想从传统的方法【本文受版权保护】原创内容，盗版必究。写代码，可以使用request方法，在t【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。hen中拿到返回的数据（虽然这里也会使用【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】缓存，subscribe的回调也会在新数转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net据返回时被执行），进行下一步操作。
这样，get的职责就更加明确，不再包含任【未经授权禁止转载】未经授权，禁止复制转载。何请求数据的意味，完完全全是从datam【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netanager中获取被缓存数据的意思。当然本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】，如果发现数据不存在或过期，也会在后台发著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】起一个请求去取最新数据，但这对于开发者而【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】言，是无感的。它更多的意义在于通过依赖收【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】集，配合autorun，使得开发更加便捷【作者：唐霜】【转载请注明来源】。
【转载请注明来源】【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netang.net著作权归作者所有，禁止商业用途转载。autorun
这个概念在前面的mobx中没有讲到。au【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。torun在mobx的意思是，当你有一个本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。函数，它本身本身永远不会有观察者，所以没【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】有办法在数据发生变化时即使响应来重新执行【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。，这个时候，我们可以使用autrun方法【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】来包裹它。这个函数内部可能对我们观察的其转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】它东西有依赖（mobx就是对其中的某个s【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。tate，在本文就是对某个datasou【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】rce），那么当依赖变化时，就重新再执行未经授权，禁止复制转载。【本文首发于唐霜的博客】一次。不过有一个前提，autorun方法【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。会在包裹这个函数时提前执行函数一次，这样【原创不易，请尊重版权】【版权所有，侵权必究】才能实现收集依赖。
未经授权，禁止复制转载。【关注微信公众号：wwwtangshua原创内容，盗版必究。【版权所有，侵权必究】ngnet】原创内容，盗版必究。【本文受版权保护】在datamanager中，这个设计不是【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】必选的，但是它可以大大提高我们的开发效率【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。，使得开发者再使用datamanager【未经授权禁止转载】【转载请注明来源】时，不用写subscribe，代码简单很【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。多。
【作者：唐霜】【关注微信公众号：wwwtangshua【转载请注明来源】本文版权归作者所有，未经授权不得转载。ngnet】转载请注明出处：www.tangshua【未经授权禁止转载】转载请注明出处：www.tangshuang.netng.netautorun的实现背后是依赖收集的思想【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net，也就是mobx中computed va转载请注明出处：www.tangshuang.net【本文受版权保护】lues的后背原理。
【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。ngnet】【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】ang.net【原创内容，转载请注明出处】save
把数据保存到服务端也是个话题，但相对于获【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。取数据，是一个相对比较隔离的，但是这里又著作权归作者所有，禁止商业用途转载。【作者：唐霜】不得不讨论，因为保存数据是不可避免的。s【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】ave不参与前面讨论的那几个机制，也就是【版权所有，侵权必究】【作者：唐霜】说，它是独立的一个操作，你只需要提供对应【本文首发于唐霜的博客】【本文受版权保护】的datasource id和post 【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】data，就可以把数据save到对应的u著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netrl去，因此，如果你一个api设计为re【作者：唐霜】【原创内容，转载请注明出处】stful风格，其实是可以被get和sa【未经授权禁止转载】【版权所有，侵权必究】ve重用的，这样可以减少register【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】的次数。
【版权所有，侵权必究】【作者：唐霜】原创内容，盗版必究。【未经授权禁止转载】save的重要创新是一个简单的事务机制，【转载请注明来源】原创内容，盗版必究。我之前写过js实现超简单setState事务机制可以在这里用上。简单的说，就是短时间内（本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。同一段代码里两次执行save操作），如果原创内容，盗版必究。转载请注明出处：www.tangshuang.net执行了多次save同一个datasour本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】ce的操作，那么这几个save操作其实可转载请注明出处：www.tangshuang.net【作者：唐霜】以合并，没有必要每次save都去请求ap转载请注明出处：www.tangshuang.net原创内容，盗版必究。i，而且如果多次请求，还可能导致一些错误【转载请注明来源】原创内容，盗版必究。现象的出现，比如网路震荡引起前一个req【版权所有，侵权必究】【作者：唐霜】uest后达到，导致保存的数据反而被前一【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】个数据覆盖。因此，保证每一个保存是所有操【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。作最终的合并结果反而很重要。因此，sav本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.nete实现了这个机制。
【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshu原创内容，盗版必究。未经授权，禁止复制转载。ang.net通知什么时候被触发？
当应用通过get要取某个datasour转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ce的data时，datamanager【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】会直接从缓存中获取值并直接返回。但是，当本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】datamanager发现缓存中的数据不未经授权，禁止复制转载。原创内容，盗版必究。存在，或者过期，那么就会去服务端请求最新【本文受版权保护】本文版权归作者所有，未经授权不得转载。的数据保存起来。而如果请求到最新数据之后原创内容，盗版必究。【本文首发于唐霜的博客】，就会立即发起通知，所有subscrib转载请注明出处：www.tangshuang.net原创内容，盗版必究。e了该datasource的回调函数会被【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。执行，所有通过autorun方法包裹的函【原创内容，转载请注明出处】【版权所有，侵权必究】数，如果自己内部依赖了该datasour未经授权，禁止复制转载。【原创内容，转载请注明出处】ce，也会被执行。
本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【本文受版权保护】这里需要理解的点是，一个datasour本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ce的回调函数不一定只来自于当前你开发的【本文首发于唐霜的博客】【原创不易，请尊重版权】这个组件，也有可能来自其他人开发的组件，【原创不易，请尊重版权】【原创内容，转载请注明出处】你的request可能会触发对别人组件的【未经授权禁止转载】原创内容，盗版必究。通知，当然，别人组件的request也可转载请注明出处：www.tangshuang.net【版权所有，侵权必究】能触发对你的组件的通知。因此，subsc【原创内容，转载请注明出处】未经授权，禁止复制转载。ribe其实是一个全局的考虑，不要仅仅想【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。到你自己的代码里面什么地方request本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。了，会得到什么结果。从事件的发生上看，s本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netubscribe和get/request本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。应该是两个完全独立的逻辑，不应该有强联系【本文受版权保护】本文版权归作者所有，未经授权不得转载。。
【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ang.net【访问 www.tangshuang.n【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】et 获取更多精彩内容】没有dispatch操作
datamanager管理的是data，【本文受版权保护】原创内容，盗版必究。因此没有dispatch操作。虽然dis未经授权，禁止复制转载。未经授权，禁止复制转载。patch的实现也很简单，但是我们并不允【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】许应用修改任何存储在datamanage本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netr中的数据。
【原创不易，请尊重版权】转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net原创内容，盗版必究。ng.net为了防止用户直接操作修改通过get得到的【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】数据，我们在get输出数据时，进行了一次【原创不易，请尊重版权】未经授权，禁止复制转载。深拷贝，这样对于应用而言，它即使强制修改【本文受版权保护】本文作者：唐霜，转载请注明出处。了数据，也不能影响其它应用，因为从代码层著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。面，实际上它们使用的根本不是同一个js对【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】象（虽然性能上会有一定的影响）。
【版权所有】唐霜 www.tangshu【作者：唐霜】未经授权，禁止复制转载。ang.net转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ng.net【版权所有，侵权必究】未经授权，禁止复制转载。transform
如果get得到的是一个deep copy原创内容，盗版必究。转载请注明出处：www.tangshuang.net，那么问题来了，两个组件希望获取到的数据【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net是经过格式化的，甚至我们可以假设这两个组本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】建的格式化结果一模一样，那么怎么办？如果转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。它们引用的是同一个js对象，一个组件改了【作者：唐霜】【原创内容，转载请注明出处】数据，另一个组件也可以得到修改后的数据。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。但是现在不行。
原创内容，盗版必究。【原创不易，请尊重版权】我们提供了transform接口，在数据未经授权，禁止复制转载。【本文受版权保护】通过get方法流出datamanager著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net之前，会经过transformers处理【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】，如果两个组件对数据结构的格式化一模一样【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】，可以在它们注册datasource的时转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】候，传入同一个处理函数。
【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】et 获取更多精彩内容】【版权所有】唐霜 www.tangshu【作者：唐霜】原创内容，盗版必究。ang.net当然，transform并非为了解决这个【本文受版权保护】未经授权，禁止复制转载。特殊的case，实际上，transfor【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】m是希望实现一种格式化机制，由datam【转载请注明来源】原创内容，盗版必究。anager来管理数据格式化，对于组件而【转载请注明来源】本文作者：唐霜，转载请注明出处。言，只需要拿到数据，直接使用即可。
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。interceptor & adapter
最后一个比较复杂的问题是，如果对于每个请【版权所有，侵权必究】【未经授权禁止转载】求，需要在请求之前进行鉴权信息的注入，那【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net么应该提供一种方式达到这一目的。于是我加未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。入来interceptor这一层，用于在【未经授权禁止转载】未经授权，禁止复制转载。request发出之前，可以对reque本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netst信息进行修改。比如我们在发出每一个请本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。求之前，必须先通过另外一个api接口，获【转载请注明来源】未经授权，禁止复制转载。得鉴权信息，得到正确鉴权信息之后，把该鉴本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。权信息加入到当前request的head【转载请注明来源】著作权归作者所有，禁止商业用途转载。ers中。通过interceptor就可【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】以实现这一逻辑，在interceptor【作者：唐霜】著作权归作者所有，禁止商业用途转载。函数中，先去get auth token【作者：唐霜】【原创不易，请尊重版权】，获取之后调用一个next函数。
【作者：唐霜】原创内容，盗版必究。但是也有场景需要去验证response内原创内容，盗版必究。【本文受版权保护】容，比如如果发现状态码是206时，想要特【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。殊处理。我们提供了adapter机制，和原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。interceptor相对，adapte【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netr是对返回信息response的处理。在【原创不易，请尊重版权】【转载请注明来源】adapter函数内部，也可以通过nex【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。t或stop方法决定该请求是否可以进入下【转载请注明来源】【关注微信公众号：wwwtangshuangnet】一步处理。
原创内容，盗版必究。【关注微信公众号：wwwtangshua【转载请注明来源】【版权所有，侵权必究】ngnet】共享单例
在开发中，我们存在两种不同的情况。第一种著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net是组件开发团队仅关注自己的单独组件，因此【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】，不会考虑外部其它团队具体怎么使用dat著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。amanager，另一种情况是不同组件之【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】间共享一个datamanager单例，这【转载请注明来源】转载请注明出处：www.tangshuang.net样对于组件而言，完全把这个单例当作是一个【本文首发于唐霜的博客】原创内容，盗版必究。依赖，调用该依赖的api即可。我们来看下【作者：唐霜】【关注微信公众号：wwwtangshuangnet】共享单例的创建：
【关注微信公众号：wwwtangshua本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netngnet】【关注微信公众号：wwwtangshua【转载请注明来源】【原创内容，转载请注明出处】ngnet】// datamanager.js const datamanager = new DataManager() datamanager.register([ ... ]) export default datamanager
在一个其它的module中，我们使用这个未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net单例：
转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】【本文受版权保护】ng.net本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。// componentA.js
import datamanager from './datamanager'
function render() {
let user = datamanager.get('user')
if (user === undefined) {
return
}
console.log(user)
}
datamanager.autorun(render)
我们在datamanager.js文件中转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。注册来很多datasource，而且每一【未经授权禁止转载】【转载请注明来源】个datasource都包含了middl本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。ewares, modems, tran【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。sformers等，所以，在具体组件使用本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。中，仅仅使用对应的datasource 本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netid就可以得到想要的数据。多个组件完全是【本文受版权保护】未经授权，禁止复制转载。共享这些datasource以及它们的中【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。间件、猫等信息。
【作者：唐霜】本文版权归作者所有，未经授权不得转载。这有点类似redux的store在整个a【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。pplication中使用一样，你可以创【本文受版权保护】【关注微信公众号：wwwtangshuangnet】建不同的单例，运行在不同的部分，这样可以著作权归作者所有，禁止商业用途转载。【作者：唐霜】做到既共享数据，又隔离中间件、猫、转换器著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】等。
【未经授权禁止转载】【作者：唐霜】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。总结
本文从两种不同的状态管理思想展开，探讨来本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net一个独立的数据管理器的实现思想。它结合来【原创内容，转载请注明出处】【原创内容，转载请注明出处】flux和mobx的一些思想，根据dat未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。a的静态特质，删除了dispatch操作【转载请注明来源】【原创内容，转载请注明出处】。通过该思想，我已经实现了一个可用的da【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】tamanager，你可以通过这里查看源码和本地预览。当然，这里面还有很多未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。值得探讨的问题，如果你有什么想法，欢迎在【版权所有，侵权必究】原创内容，盗版必究。我博客下方留言。
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。- 对datamanager.js的思想的解【作者：唐霜】【转载请注明来源】释 【版权所有】唐霜 www.tangshu【原创内容，转载请注明出处】【本文首发于唐霜的博客】ang.net未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。
