网站config配置教程,免费网站建设图书下载,建设网站中心,小型办公室网络组建方案远离JavaScript疲劳和框架大战#xff0c;了解真正重要的东西
在第二部分中#xff0c;我们讨论了功能架构的三个层次。其中一个就是状态管理层#xff0c;今天我们将对其进行更深入的探讨。下面是现代前端架构系列的第三部分和最后一部分介绍。 状态管理#xff0c;你可能…远离JavaScript疲劳和框架大战了解真正重要的东西
在第二部分中我们讨论了功能架构的三个层次。其中一个就是状态管理层今天我们将对其进行更深入的探讨。下面是现代前端架构系列的第三部分和最后一部分介绍。 状态管理你可能看不到它但它确实存在…
我们假设有一个购物应用其中包含一系列产品列表。当用户选择一个产品时其详细信息价格、产地等将被显示。对于大多数用户来说这可能只是单击一个按钮的动作但对于前端开发人员来说应用的状态已经发生了变化。这意味着什么呢
让我们一步步回顾一下事情的经过
用户执行了点击操作来选择产品。该应用程序通过获取产品详细信息来响应该事件。用户界面被更新以反映产品详细信息的新价值。
因此每当发生事件时该应用程序会更新其值并显示变化。
那么什么是状态? 在任何给定的时间点上应用程序所持有的属性或变量的值。来源Quora 那么什么是状态管理呢 在应用程序中添加、更新、删除和读取状态的概念 好的它如何影响前端架构 前端应用程序被设想为执行功能并向用户界面UI发送事件以将当前状态更改为另一种状态。 组件与状态交互
为了正确地渲染组件通常需要提供输入这些输入通常由状态提供。这意味着状态的任何变化都会更新输入因此应该触发变化检测以刷新视图。
所以问题在于如何改变状态呢
我们通过探索 Redux 模式目前是前端状态管理的事实上的标准来回答这个问题。
当应用程序中发生事件点击、拖动、HTTP调用等时它会被转换为一个动作并被分发到状态管理领域。到达后它将由称为“还原器”的函数处理。还原器是纯函数负责使用传入的操作和当前状态创建新的状态。新的状态将替换当前状态并且组件的输入将根据新的值进行更新。 在回家的
纯函数意味着对于相同的输入它总是会返回相同的输出。这使得副作用可能会导致结果不可预测没有存在的空间。例如两个值的总和总是相同的112但是由于各种原因网络问题、无效请求、授权问题等同一个网络请求的结果可能成功也可能不成功。
那么如何在 Redux 中处理副作用呢 深入学习 Redux
与前面描述的完全相同只是触发任务产生副作用的操作不会被还原器处理而是由 Redux 的另一个部分处理。副作用处理程序执行不纯任务然后将结果作为没有副作用的 action 重新引入。例如当“获取产品详细信息” action 被发送时副作用块将发出一个 HTTP 请求以获取结果。一旦请求完成成功或失败一个新的 action 将描述最终结果Fetch product details success 或 Fetch product details failed并发送给还原器。
状态管理模块在 Redux 中被称为 Store。它负责分发动作、包含 reducer 并存储当前状态。Redux 模式强制执行单向数据流使 App 具有可预测性和一致性。只有通过动作App 的状态才能发生变化而这种变化将在 UI 中得到反映。
这些变化会如何影响我们的代码结构呢
span stylebackground-color:#f2f2f2span stylecolor:#242424AppRepo│ ├──/Overview strong|/strong ├──/Components strong|/strong ├──/ListComponent │ └──/ChartComponent strong|/strong ├──/Statestrong|/strong ├──overview.state.ts * our feature state filestrong|/strong ├──overview.actions.ts * our feature actions filestrong|/strong ├──overview.reducers.ts * our feature reducers file/span/span
与对组件所采取的相同方法一样我们决定创建一个文件夹来存放属于状态管理层的每个元素
特点。状态特征状态的定义特点。动作属于业务领域特征的操作特点。归约器具有必要逻辑以更新特征状态的功能 解释软件架构并不是一件容易的事。 我尝试采用一种“由外而内自上而下”的方法在第一部分《App是如何由不同的构建块构成的》一文中我详细介绍了现代前端架构中的App是如何由不同的构建块构成的。随后在第二部分《如何将功能架构分为三层》一文中我指出现代前端架构中的功能架构是如何被分为三个由关注点分离的层的。最后我在第三部分《深入了解状态管理层及其对前端App的影响》一文中探讨了状态管理层的内部结构及其对前端App的影响。
在前端架构方面比如单体仓库、微前端架构或者如何让功能域保持良好的分离但又易于理解仍然存在更多的挑战。但在我看来这一切都始于理解前端应用程序的性质及其需求。 欢迎关注公众号清晰编程获取更多精彩内容
