我正在try 从Redux Store迁移到Apollo Graphql客户端附带的Apollo Client Cache.

Apollo Client区别于其他数据管理解决方案的关键功能之一是其normalized cache.只需设置Apollo客户端,就可以获得一个现成的智能缓存,无需额外配置.

使用Redux,我们必须根据从副作用收到的响应编写操作、类型和调度操作,并使用Reducer在存储中设置数据,这是由Apollo客户端自动完成的.

Questions:

1) 从Redux迁移到Apollo客户端缓存有什么好处?

2) 在迁移到Apollo客户端缓存之前,有什么我应该担心的吗?

推荐答案

你把苹果比作橙子.是的,在较高级别上,reduxapollo-client都为您提供了一种管理全局应用程序状态的方法.但是,redux允许您创建一个可预测的状态容器,该容器会根据您定义的操作进行更改.这意味着redux个报价:

  • 可预测性.减缩器是纯函数——给定相同的状态和动作,减缩器总是会产生相同的结果.
  • 可测试性.同样,因为减缩器只是函数,所以对它们进行单元测试很简单.
  • 可伸缩性.因为redux迫使您以特定的方式组织代码,所以它使代码更易于维护.即使随着代码库的增长,您的代码仍然可以调试,并且其他开发人员也可以理解.

Dan Abromov points out several other benefits:

  • 序列化用户操作,并将它们与状态快照一起附加到自动错误报告中,以便产品开发人员可以重播它们以重现错误.
  • 通过网络传递action对象以实现协作环境,而无需对代码编写方式进行重大更改.
  • 维护撤销历史记录或实现乐观Mutations ,而不需要对代码编写方式进行重大更改.
  • 在开发中的状态历史之间切换,并在代码更改时从动作历史重新判断当前状态,即la TDD.
  • 为开发工具提供全面的判断和控制功能,以便产品开发人员可以为其应用程序构建自定义工具.
  • 在重用大部分业务逻辑的同时,提供替代UI.

是的,redux是有很多样板的.然而,您、您的应用程序和您的团队都可能从使用它中获得很多好处,而不仅仅是拥有一种管理全局状态的方法.另一方面,如果你看不到redux提供的特性的价值,或者认为它们不值得为你的代码增加间接性和复杂性,那么就不要使用它.如果您只需要一种管理全局应用程序状态的方法,那么您可以利用apollo-client或其他库,或者只利用上下文API和useReducer钩子来推出自己的解决方案.

Apollo客户端使用@client指令来管理本地状态非常方便,尤其是如果您已经在使用库来查询GraphQL API.能够轻松地用派生字段修饰查询结果是很好的.能够使用相同的API来查询服务器和查询本地状态有助于实现良好的DX.但是apollo-client不能replace redux,因为在一天结束时,这两个图书馆出于非常不同的原因做了非常不同的事情.

Reactjs相关问答推荐

如何在重新图表中更改悬停时的条形填充 colored颜色 ?

有没有办法将在服务器端全局获取的一些数据传递到Next&>13应用程序目录中的客户端组件?

更改购物车中的产品数量后,PayPal Reaction/Next JS按钮未更新

Reaction Ploly:如何在多个子情节中共享zoom 状态

无法在主组件的返回语句中呈现预期组件

在React中映射对象数组时,如何正确呈现JSX.Element或React.ReactNode类型?

Reaction上下文值无法传递给其他组件

在继承值更改时重置react 挂钩窗体字段值

REACTION-Easy-SORT返回.map错误

React-apexcharts 中的 Y 轴刻度不会动态更新符号

使用 MUI 菜单时添加新 html 元素时布局意外滚动跳转

我可以在加载器函数中多次 fetch() 并使用一次 useloaderdata() 提取它吗?

Firebase Storage: 对象不存在图片上传路径错误

我正在try 将一组加载程序函数发送到我的路由,它抛出一个错误 Handler is not a funtion in a reactJs application

Select 建议后如何关闭 vscode 添加自动完成={}

错误:无效挂钩调用.钩子只能在函数组件的主体内部调用.使用 next/router 时

渲染的钩子比预期的少.这可能是由 React Hooks 中意外的提前返回语句引起的

如何修复 Next.js 13 中类型 AppRouterInstance 上不存在 x?

React如何在用户登录后等待当前用户数据被获取

如何通过 Material Ui 设计将 Accordion 添加到您的 React 项目中?