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 等待,但是最终我们将这部分内容删除了,因为实在没有必要。
GraphQL 如何取代 Redux的更多相关文章
- Redux和Context对比
Redux和Context对比 如果项目体量较小,只是需要一个公共的store存储state,而不讲究使用action来管理state,那context完全可以胜任.反之,则是redux的优点. co ...
- React 16.3来了:带着全新的Context API
文章概览 React在版本16.3-alpha里引入了新的Context API,社区一片期待之声.我们先通过简单的例子,看下新的Context API长啥样,然后再简单探讨下新的API的意义. 文中 ...
- 探索 Redux4.0 版本迭代 论基础谈展望(对比 React context)
Redux 在几天前(2018.04.18)发布了新版本,6 commits 被合入 master.从诞生起,到如今 4.0 版本,Redux 保持了使用层面的平滑过渡.同时前不久, React 也从 ...
- React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路
React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...
- 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)
作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...
- 还在纠结 Flux 或 Relay,或许 Redux 更适合你
重磅消息,Redux 1.0 发布,终于可以放心用于生产环境了! 在这个端应用技术膨胀的时代,每天都有一大堆框架冒出,号称解决了 XYZ 等一系列牛 X 的问题,然后过一段时间就不被提起了.但开发的应 ...
- React-Native 之 redux 与 react-redux
前言 本文 有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我讨论. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关,如文中内 ...
- 新技术探究之 GraphQL
What? GraphQL 是一种类似于 SQL 的结构化查询语言,由 facebook 于2012年创造,于2015年开源.SQL 在服务端定义,GraphQL 在客户端定义,也就是说 GraphQ ...
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
随机推荐
- write()和print()还有<%= %>的细微区别
1.首先介绍write()和print()方法的区别: (1).write():仅支持输出字符类型数据,字符.字符数组.字符串等 (2).print():可以将各种类型(包括Object)的数据通过默 ...
- Python_03-数据类型
1.1 数据类型 基本数据类型:字符串,整数,浮点数,布尔型 集合类型:列表(list), 元组(tuple), 字典(dictionary或hash) 列表(list)的定义: aList = ...
- 25.Reverse Nodes in k-Group (List)
Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. If ...
- mybatis框架入门程序:演示通过mybatis实现数据库的删除操作
1.mybatis的基本配置工作可以在我的这篇博客中查看:https://www.cnblogs.com/wyhluckdog/p/10149480.html 2.删除用户的映射文件: <!-- ...
- [转].NET 4.5+项目迁移.NET Core的问题记录 HTTP Error 502.5
本文转自:http://www.cnblogs.com/ronli/p/5900001.html 这几天试着把目前的开发框架迁移到新的.net core平台,中间遇到的问题在这里简单记录一下. 迁移过 ...
- log日志查看
(1)类型1: TcLogCls::add_log($data, __METHOD__ . '::订单号:' . $order_no, 'tc_order'); (2)类型2:
- velocity在html中换行符转换
<td colspan="3" class="tdContent2">$!obj.getDealInfo().replaceAll("\r ...
- mutex 实现 只允许一个进程
static class Program { [STAThread] static void Main() { bool createdNew=false; Mutex mutex = new Mut ...
- 在Linux下使用logrotate管理日志(转)
原文地址:http://www.tuicool.com/articles/ieAnMjN logrotate是日志循环管理工具,可以分割日志文件,删除旧的日志文件,创建新的日志文件,循环管理日志从而节 ...
- .NET基础 (18)特性
特性1 什么是特性,如何自定义一个特性2 .NET中特性可以在哪些元素上使用3 有哪几种方法可以获知一个元素是否申明某个特性4 一个元素是否可以重复申明同一个特性 特性1 什么是特性,如何自定义一个特 ...
Redux和Context对比 如果项目体量较小,只是需要一个公共的store存储state,而不讲究使用action来管理state,那context完全可以胜任.反之,则是redux的优点. co ...
文章概览 React在版本16.3-alpha里引入了新的Context API,社区一片期待之声.我们先通过简单的例子,看下新的Context API长啥样,然后再简单探讨下新的API的意义. 文中 ...
Redux 在几天前(2018.04.18)发布了新版本,6 commits 被合入 master.从诞生起,到如今 4.0 版本,Redux 保持了使用层面的平滑过渡.同时前不久, React 也从 ...
React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...
作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...
重磅消息,Redux 1.0 发布,终于可以放心用于生产环境了! 在这个端应用技术膨胀的时代,每天都有一大堆框架冒出,号称解决了 XYZ 等一系列牛 X 的问题,然后过一段时间就不被提起了.但开发的应 ...
前言 本文 有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我讨论. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关,如文中内 ...
What? GraphQL 是一种类似于 SQL 的结构化查询语言,由 facebook 于2012年创造,于2015年开源.SQL 在服务端定义,GraphQL 在客户端定义,也就是说 GraphQ ...
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
1.首先介绍write()和print()方法的区别: (1).write():仅支持输出字符类型数据,字符.字符数组.字符串等 (2).print():可以将各种类型(包括Object)的数据通过默 ...
1.1 数据类型 基本数据类型:字符串,整数,浮点数,布尔型 集合类型:列表(list), 元组(tuple), 字典(dictionary或hash) 列表(list)的定义: aList = ...
Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. If ...
1.mybatis的基本配置工作可以在我的这篇博客中查看:https://www.cnblogs.com/wyhluckdog/p/10149480.html 2.删除用户的映射文件: <!-- ...
本文转自:http://www.cnblogs.com/ronli/p/5900001.html 这几天试着把目前的开发框架迁移到新的.net core平台,中间遇到的问题在这里简单记录一下. 迁移过 ...
(1)类型1: TcLogCls::add_log($data, __METHOD__ . '::订单号:' . $order_no, 'tc_order'); (2)类型2:
<td colspan="3" class="tdContent2">$!obj.getDealInfo().replaceAll("\r ...
static class Program { [STAThread] static void Main() { bool createdNew=false; Mutex mutex = new Mut ...
原文地址:http://www.tuicool.com/articles/ieAnMjN logrotate是日志循环管理工具,可以分割日志文件,删除旧的日志文件,创建新的日志文件,循环管理日志从而节 ...
特性1 什么是特性,如何自定义一个特性2 .NET中特性可以在哪些元素上使用3 有哪几种方法可以获知一个元素是否申明某个特性4 一个元素是否可以重复申明同一个特性 特性1 什么是特性,如何自定义一个特 ...