理解和上手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. 欢迎指正。

理解和上手Redux

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

上一篇:三栏布局的n种实现


下一篇:React-Router 4 的新玩意儿