博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Hydux: 一个 Elm-like 的 全功能的 Redux 替代品
阅读量:5876 次
发布时间:2019-06-19

本文共 2315 字,大约阅读时间需要 7 分钟。

在学习和使用 + 一段时间之后,对 Elm 架构有了更具体的了解, 和预料中的一样, Elm 风格的框架果然还是和强类型的 Meta Language 语言更搭,只有一个字: 爽。 但是呢,Fable 毕竟是一个小众语言,使用的 F# 语法而且还是来自“万恶”的微软,开发环境还需要依赖 dotnet, 就这几点恐怕在公司的一些正式项目中推行就有些难度。

刚好最近需要做一个答题小游戏的应用,不想再上 React + Redux 全家桶了,一是体积太大,二是无论配置还是写起来都太繁琐。忽然发现 让我眼前一亮,简洁的架构,elm 风格, 1kb 的体积,丰富的生态,简直小应用神器! 但是呢,在实际使用中就发现,hyperapp 破坏性更新太多,导致很多第三方库,比如 persist, Redux Devtools, hmr 都不能用了,虽然这些库实现都不复杂,但是一个个改太麻烦了,又不想用老版本,干脆自己重新造了个轮子 -- .

的语法和 hyperapp 差不多,抽离了 view 层,特点是 内置了 热更新,logger, 和 persist,依然是 1kb大小 (gzip, 不包括开发环境),真正的一站式解决方案!

clipboard.png

view 层内置了 1kb 的 , 同时也有官方支持的 使用 React 来渲染.

说了这么多,还是上点代码:

首先我们有一个 counter 模块,代码和 Elm 的组织方式很类似,不需要想 Redux 在 Actions/Reducers/ActionTypes 中跳来跳去的

// Counter.jsexport default {  init: () => ({ count: 1 }), // 初始化状态  actions: { // actions 改变状态    down: () => state => ({ count: state.count - 1 }),    up: () => state => ({ count: state.count + 1 })  },  view: (state: State) => (actions: Actions) => // view    

{state.count}

}

然后呢,我们可以像 Elm 一样 复用 模块, 以前在用 Redux 时总是会面临不知道怎么复用才好的问题,而实际上 Elm 的复用是超级简单和方便的。

import _app from 'hydux'import withPersist from 'hydux/lib/enhancers/persist'import withPicodom, { h, React } from 'hydux/lib/enhancers/picodom-render'import Counter from './counter'// let app = withPersist
({// key: 'my-counter-app/v1'// })(_app)// use built-in 1kb picodom to render the view.let app = withPicodom()(_app)if (process.env.NODE_ENV === 'development') { // built-in dev tools, without pain. const devTools = require('hydux/lib/enhancers/devtools').default const logger = require('hydux/lib/enhancers/logger').default const hmr = require('hydux/lib/enhancers/hmr').default app = logger()(app) // 内置的 logger app = devTools()(app) // 内置的 Redux Devtools 扩展支持 app = hmr()(app) // 内置的热更新模块}const actions = { counter1: Counter.actions, counter2: Counter.actions,}const state = { counter1: Counter.init(), counter2: Counter.init(),}const view = (state: State) => (actions: Actions) =>

Counter1:

{Counter.view(state.counter1)(actions.counter1)}

Counter2:

{Counter.view(state.counter2)(actions.counter2)}
export default app({ init: () => state, actions, view,})

然后就可以了!简单,可控,无痛的开发环境和代码组织。

异步使用的是类似 Elm 的副作用管理器风格, actions 可以是完全纯的函数,也可以是直接返回一个 promise:

官网:

官方支持的 React 扩展:

转载地址:http://jskix.baihongyu.com/

你可能感兴趣的文章
Spark RDD、DataFrame原理及操作详解
查看>>
程序计数器、反汇编工具
查看>>
Android N: jack server failed
查看>>
007-Shell test 命令,[],[[]]
查看>>
关于Linux系统使用遇到的问题-1:vi 打开只读(readonly)文件如何退出保存?
查看>>
pandas 按照某一列进行排序
查看>>
在WPF中如何使用RelativeSource绑定
查看>>
Map的深浅拷贝的探究
查看>>
XSLT语法 在.net中使用XSLT转换xml文档示例
查看>>
如何将lotus 通讯簿导入到outlook 2003中
查看>>
WinForm 应用程序中开启新的进程及控制
查看>>
前端工程师的职业发展路线在哪?
查看>>
IOS 内存警告 Memory warning level
查看>>
[转]PAC Manager: Ubuntu 上强大的 SSH 帐号管理工具,可取代 SecureCRT_Miracle_百度空间...
查看>>
顺序容器 (2)string类型操作
查看>>
转载:我最近的研究成果(IGeometry.Project and IGeometry.SpatialReference)
查看>>
提示框
查看>>
HDOJ1233 畅通工程之一(最小生成树-Kruscal)
查看>>
14Spring_AOP编程(AspectJ)_环绕通知
查看>>
PHP之打开文件
查看>>