快捷搜索:  汽车  科技

redux入门(如何讲清楚Redux的概念)

redux入门(如何讲清楚Redux的概念)想象一下,你现在做了一个应用,其中带有聊天功能。现在几乎所有的软件都带点社交功能,那我们就以聊天来举例吧redux机制构成的这种逻辑关系,在现实中,很难有恰当的对应所以,目前为止,我们很难从非计算机的角度来解释如果将来找到了合适的例子,再来补充说明。

这篇文章要求你熟悉React,甚至一定程度上了解了Redux的基本用法
这篇文章主要帮你解决Redux的概念问题

编程界有一句名言:

如果你无法理解一个东西(某种技术方案),那说明你暂时还不需要它。
——鲁迅说不是他说的

redux入门(如何讲清楚Redux的概念)(1)

我接下来会尝试从这个角度来试着把它讲清楚。

redux机制构成的这种逻辑关系,在现实中,很难有恰当的对应

所以,目前为止,我们很难从非计算机的角度来解释

如果将来找到了合适的例子,再来补充说明。

现在几乎所有的软件都带点社交功能,那我们就以聊天来举例吧

想象一下,你现在做了一个应用,其中带有聊天功能。

那么你必然会在全局封装一个socket链接,确保实时通信。

看起来就像下面这样:

redux入门(如何讲清楚Redux的概念)(2)

当有新的消息达到时,socket要负责通知导航组件改变状态

也就是出现小红点,做消息提示。

一开始你可能觉得这没什么

但随着细节功能的完善,逻辑开始慢慢变得复杂了起来

你增加了消息弹出提醒功能,如下图:

redux入门(如何讲清楚Redux的概念)(3)

当你点击了已读按钮,刚刚被通知有新消息的导航组件

又被通知消息已读,要再次改变状态,去掉小红点。

逻辑开始有点复杂了,但这才刚刚开始


接下来,我们点击底部导航,进入聊天页面

redux入门(如何讲清楚Redux的概念)(4)

此时,如果有新的消息到来

socket除了通知底部导航,还得通知联系人列表组件

当然这还不够,我们继续完善细节功能

点击联系人,进入与该联系人的对话页面,如下图

redux入门(如何讲清楚Redux的概念)(5)

在上图当中,你要给人发送消息,除了通过socket把消息发送出去

还需要再次通知聊天列表组件,新增了一条对话

这时如果又来了一条新的消息,将会变成下面这样:

redux入门(如何讲清楚Redux的概念)(6)

我相信不用往下再举例了,你应该已经发现了,逻辑关系有点复杂对么?

造成这种复杂的局面,主要原因,就是职责分配太不明确了。

各个模块之间的通信比较混乱。

首先,socket管的事儿是不是有点太多了? 本来,只负责收发消息,现在还得负责把消息传递给特定的组件。 这就是我们通常讲的,耦合性太强了。

另外,组件和组件之间也要通信, 而且通信的组件是互相独立的,没有关系,也找不到共同的父组件。这个时候,你应该特别希望出现一个全局的协调中心,来负责各个组件的通信问题。

于是我们尝试这样改造一下:

redux入门(如何讲清楚Redux的概念)(7)

redux入门(如何讲清楚Redux的概念)(8)

那么谁来做这个全局的智能数据仓库呢?

根组件? storage? 显然都不好

这个时候,即便拿大腿想一下,也应该知道,就是redux

redux入门(如何讲清楚Redux的概念)(9)

如果你能看出来这个是一个典型的观察者模式,那就再好不过了

不知道也没关系,总之呢,我们现在解决了各个组件之间混乱的通信模式

全部改为跟store进行打交道。

好了,解决了这个大问题之后,再来简单说一说, reducer和 action

先看一眼下面的图

redux入门(如何讲清楚Redux的概念)(10)

action是我们向store发出的指令,reducer是我们修改state数据的方法。根据发出的指令,调用相应的reducer方法修改state,仅此而已。

Action本质是就是个对象, 包含你要执行的动作名称,以及要提交的数据等

我们把action发送给store,例如你发送了这样一个Action对象

{ "type": "有新消息" "data": { "message":"啥时候还钱呢?" } }

然后编写reducer函数,它最终交给Store进行管理。也就是我们只负责发送action指令,reducer自动被触发。

编写代码就像下面这样:

function myreducer1(state action) { switch(action.type){ case "有新消息": { //........ return {...state} //这里没有直接修改state,而是返回了新的对象 } case "消息已读": { //........ return {...state} //这里没有直接修改state,而是返回了新的对象 } default : return state;//如果action类型不能识别,不做操作,直接返回 } }

当你发送一个action给store的时候, 理论上所有的reducer将会被触发, reducer将会执行它的动作,操作修改state,然后要组装一个新的state对象并返回(为什么要返回新的?这是官方要求,否则将无法通知其他组件更新)

然后redux去通知所有订阅了的关联组件进行更新。

关于为什么reducer叫做reducer? 这可能是最让人难以理解的地方。

因为这完全是一种设计上的概念,你的代码并不一定要这样设计:

redux入门(如何讲清楚Redux的概念)(11)

根据上图所示, combineReducers作为一个总的reducer,调用其他reducer,并交由store管理。 也就是说,Action发过来的时候,Store会触发这个combineReducers。

然后,你的每个子reducer只负责处理一部分数据,总的reducer来负责调用它们,每个子reducer处理的部分数据最终合并起来,返回完整的state。

reduce译为 降低、合并的含义,reduce通常也叫作聚合或归并操作。

简单的说,当你把一个东西分而治之,但最终要把分别处理的结果,合并到一起作为整体呈现。那每一部分的处理器,就可以叫做一个reducer。

代码部分不再贴了,官方给的例子挺清楚的。

https://www.redux.org.cn/docs/basics/Reducers.html

至此,你应该大概理解了redux的概念

猜您喜欢: