理解和上手Redux

顾名思义本文分两个部分，理解和上手，第一部分我先讲个故事，这个故事也许不是特别形象，但对大家理解Redux一定有所帮助。第二部分我举个例子。

先讲个故事：

一个餐厅（应用），我是顾客（用户），这个餐厅很特殊，Redux帮老板设计了一套非常科学的食材管理系统：餐厅门口有很多小液晶面板（react组件），每个液晶面板上显示一种食材的剩余数量（数据），餐厅的所有食材都存放在一个智能冷库（redux 的 store）。看到我爱吃的东西都还有，我就走进去坐了下来，桌面上一张一次性菜单，我拿起笔在上面勾选（action）一份牛排一份鸡胸，我叫来服务员，服务员把我点的单子拿到厨房（dispath）贴到智能冷库（store）上。冷库通知对应的厨师（reducer）拿食物做菜。餐厅很大，每道菜都有固定的厨师来做，冷库很聪明，要做什么菜就能找到对应的厨师。厨师把牛排从冷库拿出来，厨师不能告诉冷库我拿了一块牛排，他要告诉冷库牛排还剩几块（新state 更新旧 state），这时候那块显示牛排还剩几块的液晶面板也更新了，这块面板连接（订阅）的就是冷库中牛排对应的数据。我还注意到旁边有块很大的屏幕，显示了所有饮料的数据，所有饮料库存数据更新，屏幕都会更新。

Action creators就是那一次性菜单，我想吃什么直接勾选就行了，但是没有也没关系，我可以在白纸上写啊，效果一样。你还可以注意到一点，你可以看到牛排还剩几块，但只有厨师可以把牛排从冷库拿出来。

下面举个例子：

Redux就是个数据中心，不依附于任何框架在哪使用都行。但是和它最搭配的应该就是React了，而且大家学习它的动力大多也是解决React状态管理的问题。都说Redux文档详尽清晰，但我感觉并不友好，它没有用最简单直观的方式告诉你如何搭配React使用。研究了两天的文档和示例，终于在项目中用上了我认为原本10分钟就能上手的Redux。当然，这两天去了解Redux的方方面面和相关的东西是值得的，只不过我喜欢先上手一个知识再去详细了解它，而不是反过来。如果你和我一样，那看完我写的这个小程序绝对是值得的。

关于我的这段程序解释几点：1. 功能超简单根本用不上Redux，但我强行用一下单纯为了介绍Redux怎么用。2. 和官方示例counter功能相似且更简单，但官方示例并没有详细的解释，而且没有和React绑定使用，如果你不了解Redux看完了你还是迷糊，我的这段程序就是为了让你不迷糊。3. 解释部分在注释，部分名词和官方有出入但不影响，只是我的理解。4. 欢迎指正。

总结一下，数据处理器的集合生成一个数据中心，connect把旧组件替换成已经连接到数据中心的新组件（传入需要监听的数据），需要更新数据调用this.props.dispatch方法传入action，可以写一些动作生成器管理action。完事。