GraphQL 如何取代 Redux

简评:使用 GraphQL 可以大大简化客户端状态管理部分的代码。

⚛️切换到React

故事背景:在 2016 年,Pathwright 的前端团队就开始将客户端的代码从 Backbone & Marionette 切换到 React。 对于我们来说 UI 的声明性模型比 MVC 模型更具意义。

我们使用 flux 架构来管理随着应用状态,随着业务变得复杂,它添加了越来越多间接层。当我们着手处理 store 或者状态树中的一个分支逻辑的时候,实际上是将服务端业务数据和关系复制到客户端上。

我们拥有优雅的声明式 React 组件,但是数据层确是 action、reducers、异步中间件和去赋范的数据逻辑。

这一切都感觉非常的错误。

↪️切换到GraphQL

当我们尝试 GraphQL 的时候马上就爱上了它。我们将 GraphQL 替换了一堆 REST API。当我们 UI 使用这些新的 GraphQL 时不再需要 store。我们通常需要创建一个 stores,action 等待,但是最终我们将这部分内容删除了,因为实在没有必要。

产生这种观点的三个主要原因

  1. 我们大部分的状态管理代码关注的是将来自分散的 REST 资源合并和变换成适用于我们 UI 的数据。
  2. 很多复杂的状态管理就是有序的获取所有异步数据(sagas, 中间件, thunks 等等.) 实际除了上面这部分内容,我们使用自带的
  3. React state 可以很好的满足我们日常业务。

关于 GraphQL 和 Redux

前面可能有点标题党。我们真正替换的是 REST API,当成功替换后我们发现大多数状态管理代码不再必要。

当客户端可以控制服务端返回数据的具体模板(只需要一个请求),这大大简化了我们应用逻辑(主要是状态管理部分),我们甚至不再需要使用状态管理库来帮忙管理我们的库,因为应用逻辑变得足够简单。

为了说明这一点,假设我们的 UI 通过状态管理库和后端服务进行通信。

这可能是这样的:

上图就直观的列出了 Redux/REST 和 Apollo/GraphQL 的区别, Redux 为我们实现了很多的内容,但是不可避免的要处理多个请求。而 GraphQL 则直接从缩减处理逻辑来大大简化这部分内容。

我认为对于大部分客户端应用程序, GraphQL 可以完全取代对 Redux 的需求。这并不是说 Redux 不能满足需求(实际上这是一个很棒的库)。而且 Redux 有助于我们处理 REST(因为很多时候我们无法控制后端的接口使用 GraphQL ,大部分还是使用 REST)。

但。。。

如果你可以使用 GraphQL 而不是 REST,那么我建议使用 GraphQL 的优势消除客户端状态管理中的复杂性逻辑。

原文:https://hackernoon.com/how-graphql-replaces-redux-3fff8289221d

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Redux是一个用于在React应用中管理状态的库。它结合了React和Redux,提供了一种可预测的状态管理解决方案。在React Redux中,我们使用Provider组件将Redux的store传递给整个应用程序,以便在应用程序的任何地方都可以访问到Redux的状态。\[1\]\[3\] 在React Redux中,我们可以使用connect函数将组件连接到Redux的store,并将store中的状态映射到组件的props上。这样,组件就可以通过props访问和更新Redux的状态。同时,我们还可以使用dispatch函数来触发Redux中的action,从而更新状态。\[2\] 通过React Redux,我们可以更方便地管理React应用的状态,使得应用的状态变化更加可控和可预测。同时,React Redux还提供了一些中间件,如Redux-thunk,可以帮助我们处理异步操作,使得应用的状态管理更加灵活和强大。\[2\] 总之,React Redux是一个强大的状态管理库,可以帮助我们更好地管理React应用的状态,并提供了一些工具和中间件来简化状态管理的过程。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [React中的Redux](https://blog.csdn.net/yrqlyq/article/details/119118182)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值