理解和上手Redux

简介: 顾名思义本文分两个部分,理解和上手,第一部分我先讲个故事,这个故事也许不是特别形象,但对大家理解Redux一定有所帮助。第二部分我举个例子。先讲个故事:一个餐厅(应用),我是顾客(用户),这个餐厅很特殊,Redux帮老板设计了一套非常科学的食材管理系统:餐厅门口有很多小液晶面板(react组件),每个液晶面板上显示一种食材的剩余数量(数据),餐厅的所有食材都存放在一个智能冷库(redux 的 store)。

顾名思义本文分两个部分,理解和上手,第一部分我先讲个故事,这个故事也许不是特别形象,但对大家理解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。完事。

相关文章
|
缓存 前端开发 API
React + MobX 快速上手2
React + MobX 快速上手
|
4月前
|
前端开发 JavaScript 数据管理
React Formik入门:简化表单处理的神器——全面掌握Formik在React表单开发中的高效应用与实战技巧
【8月更文挑战第31天】在React应用中,表单处理常常因繁琐而令人头疼。Formik作为一个开源库,专为简化React表单设计,减少冗余代码并提升处理效率。本文介绍Formik的使用方法及其优势,通过示例展示如何安装配置并创建基本表单,帮助开发者轻松应对各种表单需求。
57 0
|
7月前
|
设计模式 JavaScript 前端开发
01. 5 分钟,Vue3 开发快速上手
01. 5 分钟,Vue3 开发快速上手
36 0
|
前端开发 API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
87 0
|
7月前
|
存储 JavaScript 开发者
Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案
Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案
93 0
|
前端开发
react快速上手
react快速上手
52 0
react快速上手
|
存储 前端开发
React + MobX 快速上手1
React + MobX 快速上手
|
存储 JSON JavaScript
「前端架构」Redux vs.MobX的权威指南
「前端架构」Redux vs.MobX的权威指南
|
前端开发 JavaScript 定位技术
初识 react 一分钟上手
单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
初识 react 一分钟上手
|
存储 JavaScript
uniapp快速上手Vuex
uniapp快速上手Vuex
248 0
uniapp快速上手Vuex

热门文章

最新文章