许多开发人员了解如何使用Redux或React Context进行状态管理，但留下了如何将Apollo Client作为替换的混淆。
在本文中，我们将分解国家管理解决方案的职责，讨论从头开始构建解决方案所涉及的内容，以及Apollo Client 3如何引入新的方式来管理当地状态和远程数据。
您还可以在YouTube上观看阿波罗斯威尔马勒在阿波罗Spect Mound 2020的谈话。
国家管理是每个应用程序中最具挑战性的部分之一，历史上，在新的反应项目开始时，我们必须以裸露的方式从头开始设计和实施国家管理基础架构。
无论我们采取哪种方法，在每个客户端应用程序中，状态管理解决方案的通用角色都是相同的：处理存储，更新状态和启用反应性。
大多数应用程序需要掌握某些数据。该数据可能包含我们已配置客户端的一点本地状态，或者它可能是来自后端服务的远程状态的子集。
通常，我们需要将这两条数据，本地和远程组合，然后在我们的应用程序中同时呼叫它们。仅此任务有可能获得非常复杂的潜力，特别是当我们需要对我们的应用程序的状态执行更新时。
命令查询分离原理指出，我们可以执行两个通用类型的操作：命令和查询。
在休息中，我们有几个类似的命令类似的操作，如删除，更新，帖子等以及一个名为get的查询操作。
大多数情况下，在调用客户端Web应用程序中调用操作之后，我们需要更新本地存储的状态作为副作用。
当存储更改时，我们需要一种有效的方法来通知依赖于商店特定部分的UI的碎片，并且它们应该呈现新数据。
在目前可以充分处理每个图书馆可以充分处理所有三个责任！以下是一些最受欢迎的方法在反应领域中。
比较zodux或反应上下文的状态管理与apollo客户端是用Redux和React Context，我们仍然必须在处理获取逻辑，异步状态，数据编组和更多的情况下编写设计基础架构。最后，我们仍然必须自己制作很多这些设计决策。
对于较小的项目，我认为这是一种优雅的方法，但在过去致力于大规模的Redux项目，我敏锐地意识到它可以测试和维护额外代码的具有挑战性。
国家管理基础设施可以占构建客户端应用程序的高达50％的工作
在谈话中的3:05，我们讨论了一个通用的客户端架构，分解组件涉及现代应用程序，如：
在视觉上铺设了这一点，我们可以识别处理存储，更新状态和反应性的架构的部分实际上是工作的一半。
这个讨论还有更多。如果您想深入潜入，请参阅现代客户端架构中每个关注的示例和参数，阅读完整的客户端架构基础文章。
必须花时间构建整个数据层的基础架构不是一项灯。以下是从数据层内处理的许多问题：
我们考虑这些任务需要与我们的数据交互所需的必要基础架构的一部分。他们提供了我们可以在顶部构建我们的应用程序的基线。使用Redux或React Context，如果我们希望此基础架构，我们必须使用自己的自定义代码构建，测试和维护它。
在Apollo，我们将这些问题视为应该为您所做的事情，以便您可以移动到特定于应用程序的任务，如：
这些只是你可以做的事情，因为它们是特定于您的应用程序，而且它是使您的应用程序特殊的原因。
使用Apollo Client 3作为状态管理解决方案，我们从所有数据层都关注的答案开始。开箱即用，Apollo客户端附带存储，更新和反应性。
在使用Apollo客户端时，我们所做的大多数工作都可以被认为是下降三类之一：
Apollo Client为我们提供了一组配置，获取和更新客户端状态的API
选择Apollo Client 3在其他状态管理Solutions，如Redux或Context + UserDucer反应是一个权衡。
走向Apollo客户端路线，我们留下了学习缓存和查询API，其中over为我们提供了数据层基础架构。选择Redux或者在Apollo Client上与上下文反应意味着构建基础架构与数据层交互，然后测试，消耗和维护它们。
Apollo Client 3还刚刚附带了几个新的API，引入了使用缓存的更清晰的方式，并处理常用用例。
您可以了解如何使用Apollo Client 3的新API使用本地状态（无功变量）构建Todo应用程序，以及通过在GitHub上验收Apollo Client 3状态管理示例，通过新高级缓存修改API。
基本配置涉及创建一个新的InmemoryCache，没有将浮雕实例指向远程GraphQL API的选项。
导入{apolroclient，inmemorycache}从＆＃39; @ apollo / client＆＃39; ; const cache = new（）; const client = new（{URI：＆＃39;＆lt; https：//api.todos.com/>＆＃39;，cache}）;
Apollo Client 3的一个改进是一切已被移动到@ Apollo /客户端下的生活。
最新的Apollo Client 3释放中，数据获取体验没有太大变化。要将数据从远程API拉到缓存中，以便在组件中呈现它，请参阅以下代码。
导入从＆＃39反应;反应＆＃39;从＆＃39导入{todolist，loader}; ../组件＆＃39; ;从＆＃39导入{filtertodos};利用者＆＃39; ;从＆＃39导入{imedquery}; @ apollo / client＆＃39; ;从＆＃39导入{gql}; @ apollo / client＆＃39; export const_all_all_all_todos = gql`查询getalltodos {todos {id text已完成}}`导出默认函数activeTodosList（）{const {loading，data，错误} = uderquery（get_all_todos）; if（加载）返回＆lt; loader /＆gt; if（错误）返回＆lt; div＆gt;发生错误＆lt; / div＆gt;如果（！数据）返回＆lt; div＆gt;没有数据！ ＆lt; / div＆gt; ;返回＆lt; todolist todos = {filtertodos（数据.todos，'活动＆＃39;）} /＆gt; ; }
使用Query Hook摘要远离所有复杂的数据获取，状态管理和编组逻辑，我们曾经与裸骨近方法有关。在幕后做的几件事是：
通过委派与同一数据的未来请求委派并从缓存中的本地副本源，而不是将其从缓存中的副本源放在网络中来保存带宽
许多开发人员熟悉缓存在Redux中的样子或与上下文反应的内容，因为缓存是普通oL'javascript对象。让我们看看在获取一些数据后，在Apollo客户端中查看缓存的样子。
假设我们有一个基本的getAlltodos查询，如上一节中所示的基本查询，并调用它返回我们呈现给UI的嘟素列表。
如果我们要看看缓存，那将看起来像这样：
{＆＃34; todo：1＆＃34; ：{__typename：＆＃34; todo＆＃34; ，ID：1，文本：＆＃34;入门“...}，＆＃34; todo：2＆＃34; ：{__typename：＆＃34; todo＆＃34; ，ID：2，文本：＆＃34;第二个Todo“...}，＆＃34; Todo：3＆＃34; ：{__typename：＆＃34; todo＆＃34; ，ID：3，文本：＆＃34;第三个todo“...}，”root_query＆＃34 ;: {__typename：“查询＆＃34; ，todos：{...} ...}，...}
因为缓存是归一化的，所以它确保只有一个引用返回的查询返回的项目。
通过构造缓存键来确定唯一性（您现在可以使用关键字字段API配置）确定。在配置缓存＆gt时阅读此内容;自定义文档中类型的标识符生成。
在Apollo客户端3中，我们在突变后更新缓存的方式有一些新增的添加，即名称高级缓存操作API。
假设我们使用相同的待办事项应用程序，我们希望执行addtodo突变，步骤如下。
编写GraphQL突变（包括突变响应中的新项目，以在缓存中自动将其标准化）
导入从＆＃39反应;反应＆＃39; ;从＆＃39导入{标题，加载}; ../组件＆＃39;从＆＃39导入{gql，viemution}; @ apollo / client＆＃39; ; Export Const_todo = GQL`突变addtodo（$ text：string！）{addtodo（text：$ text）{succest todo {id text已完成}错误{message}}}`导出默认函数newtodo（）{const [变异，加载] = USEMIGUR（ADD_TODO，）IF（加载）返回＆lt; loader /＆gt;返回＆lt;标题addtodo = {（text）=＆gt;变异（{变量：{text}}）} /＆gt; ; }
这通常足以在缓存中创建一个新项目。虽然有时，当我们使用缓存的集合时（先前获取的数据阵列），为了获取列表，以便在ui中可视地重新渲染，我们需要在utemution选项中使用更新功能来指定缓存应该处理新项目的特定于应用程序的方式。
在添加新的todo的情况下，我们希望采取的行为是将新项目添加到缓存Todos列表的末尾。以下是在更新功能中使用Cache.ReadQuery和Cache.WriteQuery API的方式。
const [突变，加载] = Usemutation（add_todo，{update（cache，{data}）{contor newtodofromresponse = data？.addtodo .todo; const aliftationtodos =缓存。Readquery（{查询：get_all_todos，}）; cache。pache。pache。trance（ {查询：get_all_todos，data：{todos：idesttodos？.todos。concat（newtodofromresponse）}，}）;}}）
Apollo Client 3为Power Users推出了高级缓存操作API（修改，evict，GC）。您可以在此博客文章和文档中了解更多有关它们的信息。
关于Apollo Client 3的我最喜欢的新功能是缓存策略和反应变量。
缓存策略缓存策略介绍了一种新方法来修改缓存返回的内容读取和写入缓存之前的内容。它引入了设置默认值，本地状态管理⚡，分页，管道，过滤器和其他常见客户端用例的清洁模式。
反应变量是我们希望能够启用缓存反应性的变量的容器。更改时会通知缓存（这意味着如果我们使用的反应，它也会触发重新渲染）。
//创建反应变量导出const todosvar = cache .makevar＆lt; todos＆gt; （）; //设置值todosvar（[]）; //获取值const tracttodosvalue = todosvar（）;
这方面的最酷部分意味着可以从您想要的任何地方都可以改变反应变量 - 这是对本地解析器中所有当地国家管理（正如我们之前在AC2.x中所做的）的巨大改进。
对于如何使用缓存策略和反应变量来执行本地状态管理的演练，请从谈话中查看演示。反应变量Docs即将推出！
我们还了解到它是多少工作，您可以自己构建数据层，并且当您想使用Apollo Client而不是裸骨状态管理解决方案时，您可能想考虑。 最后，我们看看一些新的Apollo客户端3 API以及它们如何用于实现公共客户端州使用情况。 开发人员倡导Apollo GraphQL⚡SolidBook.io⚡高级打印＆amp; khalilstemmler.com的ddd⚡ 成为Apollo Insider并首先获得新功能，最佳实践和社区活动。 哦，没有垃圾邮件。 曾经。 这篇文章有用吗？ 有建议吗？ 考虑一下，我们可以为未来的读者提高它。 使用我们的免费互动课程，视频，测验和代码挑战在奥德赛，阿波罗和＃39;新官方学习平台上获取您的GraphQL技能！ 开始你的奥德赛！
Apollo Studio Explorer是未来的GraphQL IDE。 使用单击查询构建，智能搜索和可变提取等功能来保存时间并构建更快。 免费使用（永远）。 尝试工作室