Redux工具箱的优势和潜在性缺点

Redux工具箱的优势和潜在性缺点

全文 dev.to/srmagura/th…

有一天，我还在吃午餐时所写的一条不经意间的评价引起了与Redux管理者之一Mark Erikson的一场出乎意料的有意思争辩。

Redux 一直以来一直是管理方法 React 应用软件中全局状态的最佳选择库。 Mark协助建立的Redux工具箱是一个相对较一个新的库，致力于变成“官方，包括电池工具箱，以实现快速的Redux开发设计”。本文将详细介绍我对于Redux工具箱的优势和潜在性缺点的观点。

Redux 为何非常好

1. 这是缺乏主见的。Redux 规定你将全局状态放到存放中，并通过reducer及使用来处理该情况。操作是具备type属性简易 JavaScript 目标，而reducer都是基于实际操作将旧状态转换给新状态下的纯函数。此外，别的一切都在于您。
2. 其具有最小 API 。Redux 仅有 5 个顶尖导出来，在其中只有一个createStore是不可缺少的。
3. 它应用广泛。是不是也希望大家的储存中仅包括用户状态的 ID？或是你们是否也希望大家的存放追踪知名企业应用软件中每一个实体线、网页页面、小组件和输入情况？不管你的测试用例是啥，Redux 以及大中型生态体系可以满足客户的需求。

Redux 为何难以

Redux 难以，缘故和它非常棒的缘故同样。

1. 这是缺乏主见的。Redux 没有告诉你如何建立应用软件状态、reducer或操作，因此你务必贡献自己的一份力量确定。
2. 其具有最小 API 。您很快就意识到了，应用 Redux 建立有效应用程序必须的不仅是createStore。这些方面的一个主要实例是必须从 API 读取数据以回应实际操作。
3. 它应用广泛。Redux 能够有很多不同的前端架构，非常容易找不到方向。我用了很长一段时间才搞清楚 Redux 怎样融入我正搭建的 React 应用软件。

Redux 工具箱的紧急救援

Redux Toolkit 希望通过提供一种便捷并且对新手友善的 Redux 开发方式来减少第四个困扰。它的功能包含：

• createAction— 容许您界定实际操作创始人，类似 typesafe-actions 。我是一个TypeScript的顽固分子，因此类型安全是无法商议的。
• createReducer— 容许您撰写并没有switch句子的reducer。在汽车引擎盖下应用Immer。Immer是令人惊讶的，就算你不准备应用Redux Toolkit，你也应该在您的reducer中使用这些。
• createSlice— 一个强悍的小助手，容许您一举界定情况切成片的reducer及使用。
• createEntityAdapter— 回到一组预搭建的reducer和选择符函数公式，用于实体线实行 CRUD。
• RTK Query - 用以在 Redux 存放中获得和cdn加速状态下的库。可以和 React Query 进行对比，后面一种致力于处理同样的难题，但不同。

我对于 Redux Toolkit （RTK） API 的观点

整体提议

• 假如你是Redux的小白，请选择RTK，但是不要认为你必须运用它所有功能。我们可以用createAction和createReducer做很多事。
• 如果你早已使用 Redux 和 Immer，则没理由务必转换到 Redux Toolkit。仅有在你允许其方式时候使用这些。

createAction

这不是一个新点子，但仍然是一个有价值的念头。现阶段，种类安全操作规程在这一方面似乎比 RTK 更优秀，由于种类安全操作规程getType函数公式在switchreducer中准确地输入action.payload。ActionType种类的支持程序流程也特别好。希望见到RTK在这些方面能够和种类安全操作规程一概而论。

createReducer

如同我以前常说，Immer真的很不错。可是 Immer 已与switchreducer中准确地输入配合默契，因此我没有看见createReducer极大的益处。

createSlice

我在这有一些忧虑。我很喜欢在传统 Redux 方式中，你将actions与reducer分离界定。这类关注点分离容许您布局用户可实施的实际操作，不会深陷这种操控的控制方式。createSlice防止了这类分离出来，我不知道这也是向着前进方向迈出的一步。

createAsyncThunk

可以将createAsyncThunk包含于 Redux 工具箱中，Redux 精英团队使 thunks 变成平台推荐的 Redux 不良反应实体模型。我很喜欢 Redux 自身对药物副作用无想法，所以对 thunks 的内嵌适用有繁杂的觉得。

自然，您仍然能够用其他不良反应实体模型，比如sagas和observables及其Redux Toolkit。我就是 Redux Saga 的忠实粉，它让 Redux 与您的后面 API 集成化更加轻松，另外还使您可以撰写很强大的多线程流。Sagas 是采用生成器函数和yield整理的，这真的需要一些时间去适应。

createEntityAdapter

我担心createEntityAdapter可能会致使设计方案过度以 CRUD 为核心，钟爱最基本的add、update和remove实际操作，而非为每一个实体线量身打造的更加有意义的说明性实际操作。我不否认我并不充分理解这儿的测试用例。假如createEntityAdapter能够避免您撰写很多重复代码，请尽快使用这些。

RTK Query

RTK Query实际上是一个独立的库，正好与Redux Toolkit坐落于同一个库中。我觉得作为一个独立的包会更强，但也只是我的看法。庆幸的是，RTK 查看是以独立的入口点导出来的，因而如果你不能使用它，这将从来不会包括在你的捆绑包中。

RTK 查看对我而言好像非常复杂，那如果我尝试一下，我的观点可能更改。如果你正在寻求数据收集解决方法，你也应该考虑到React Query。我评估了相似的SWR库，但发现这个缺乏我们的团队常用的一种一些特点。

马可对于我宣称RTK过度刚愎自用的回复

在这儿阅读文章详细的留言!汇总：

若您所闻，这所有的一切 API 都有一个共同活动的主题：

这些都是大家一直使用 Redux 干的事，并已在大家的word里展开了课堂教学。

由于Redux并没有包括一切内置物品，因此人们迫不得已手动式撰写这一段编码，或是建立自已的抽象化。

因而，大家创立了全部这些概念标准化完成，大家可以根据实际情况应用，那样大家未来就无需手动式撰写一切编码。

我还在应用软件中采用什么

我最近的4个 React Web 应用软件

这都是彻底用 React 整理的中小型单页应用程序流程。

• Redux 约为全部应用软件状态下的 10%，当地部件情况占此外 90%。大家有意只将 Redux 用以在屏幕中间导航栏的时候需要保存在运行内存里的情况，比如相关用户状态的信息。
• 不论是应用Redux或是useReducer，大家会用类型安全的action、Immer和switch句子结构了action和reducer。
• 一个简单的订制useQuery勾子用以从后面端读取数据。此数据信息最后处在Page元件的当地情况。
• 有一些Redux Saga适用登陆和分布式锁客户建立的繁杂订单信息文稿的变更。

我 React Native

此应用务必脱机工作，所以将运用的绝大多数情况放到 Redux 中是有价值的。

• Redux Saga 承担与后面 API 中的所有互动。这效果不错。当客户从脱机工作回到时，将排队等候实际操作发送至后面有一个非常漫长的过程。
• 应用redux-persist?分布式锁全部Redux存放。这对我而言依然很特别。
• 当地部件情况用以文本框。

我 Next React Web

最新项目一直令人激动，因为它使您还有机会重新审视你的架构和技术堆栈。憧憬未来，我们将要：

• 坚持用种类安全操作规程和switchreducers。这也是转换到Redux Toolkit的createAction和createReducer间的紧密联系。升级：RTK精英团队很好地说服我试一试createReducer和createSlice！
• 将我们自身研发的useQuery替换为 React Query。因而，我们以前放到 Redux 中的一些情况如今会自动保存在 React Query 的存储中。
• 继续留在一些地方应用 Redux Saga。

本站是一个以CSS、JavaScript、Vue、HTML为中心的前端开发技术网址。我们的使命是为众多前端工程师者提供全方位、全方位、好用的前端工程师专业知识和技术服务。 在网站上，大家可以学到最新前端开发技术，掌握前端工程师最新发布的趋势和良好实践。大家提供大量实例教程和实例，让大家可以快速上手前端工程师的关键技术和程序。 本站还提供了一系列好用的工具软件，帮助你更高效地开展前端工程师工作中。公司提供的一种手段和软件都要经过精心策划和改进，能够帮助你节约时间精力，提高研发效率。 此外，本站还拥有一个有活力的小区，你可以在社区里与其它前端工程师者沟通交流技术性、交流经验、处理问题。我们坚信，街道的能量能够帮助你能够更好地进步与成长。 在网站上，大家可以寻找你需要的一切前端工程师网络资源，使您成为一名更加出色的网页开发者。欢迎你添加我们的大家庭，一起探索前端工程师的无限潜能!