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

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

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

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

说了这么多,还是上点代码: 首先我们有一个 counter 模块,代码和 Elm 的组织方式很类似,不需要想 Redux 在 Actions/Reducers/ActionTypes 中跳来跳去的

 // Counter.js
export default {
init: () => ({ count: 1 }), // 初始化状态
actions: { // actions 改变状态
down: () => state => ({ count: state.count - 1 }),
up: () => state => ({ count: state.count + 1 })
},
view: (state: State) => (actions: Actions) => // view
<div>
<h1>{state.count}</h1>
<button onclick={actions.down}>–</button>
<button onclick={actions.up}>+</button>
</div>
}

然后呢,我们可以像 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<State, Actions>({
// 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) =>
<main>
<h1>Counter1:</h1>
{Counter.view(state.counter1)(actions.counter1)}
<h1>Counter2:</h1>
{Counter.view(state.counter2)(actions.counter2)}
</main> export default app({
init: () => state,
actions,
view,
})

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

在线 demo

异步使用的是类似 Elm 的副作用管理器风格, actions 可以是完全纯的函数,也可以是直接返回一个 promise: https://github.com/hydux/hydux#actions-with-cmd

官网: https://github.com/hydux/hydux

官方支持的 React 扩展: https://github.com/hydux/hydux-react

Hydux: 一个 Elm-like 的 全功能的 Redux 替代品的更多相关文章

  1. 一个页面,WEB全功能

    当鼠标在页面上往下滑动的时候,页面也一直向下,标签也顺带着全部向下滑动 以前浏览页面,主要是在PC上进行浏览,一个页面不适于太长,需要用户向下拖动: 当时的设计是,点击标签,点击不同的标签,跳转到不同 ...

  2. 全功能Python测试框架:pytest

    python通用测试框架大多数人用的是unittest+HTMLTestRunner,这段时间看到了pytest文档,发现这个框架和丰富的plugins很好用,所以来学习下pytest.   imag ...

  3. OpenResty 是一个全功能的 Web 应用服务器

    OpenResty (也称为 ngx_openresty)是一个全功能的 Web 应用服务器.它打包了标准的 Nginx 核心,很多的常用的第三方模块,以及它们的大多数依赖项. 通过众多进行良好设计的 ...

  4. XMind 是一个全功能的思维导图和头脑风暴软件,为激发灵感和创意而生

    XMind 是一个全功能的思维导图和头脑风暴软件,为激发灵感和创意而生 https://www.xmind.cn/

  5. Entity Framework7 入门之全功能.NET版本下使用EF7(含源码)另附数据迁移常见错误处理

    Entity Framework7 入门之全功能.NET(Console, WinForms, WPF等)使用EF7 昨天,我们介绍了EF的新特性和开发计划,如果你还不了解,请移步 Entity Fr ...

  6. notepad++代码自动补全功能

    可以代码自动补全功能,默认他是没有开启这个功能的,在首选项->备份与自动完成 里面有自动完成这一个设置,可以设置单词补全,也可以设置函数补全,这样写代码就快多了

  7. Eclipse自动补全功能和自动生成作者、日期注释等功能设置

    修改作者.日期注释格式:打开Windows->Preferences->Java->Code Style->Code Templates,点击右边窗口中的Comments,可以 ...

  8. 【原创】Matlab中plot函数全功能解析

    [原创]Matlab中plot函数全功能解析 该帖由Matlab技术论(http://www.matlabsky.com)坛原创,更多精彩内容参见http://www.matlabsky.com 功能 ...

  9. emacs配置详解及C/C++IDE全功能配置演示(附配置文件)

    我的emacs插件下载地址: http://pan.baidu.com/share/link?shareid=4196458904&uk=3708780105 说明: 1.为什么使用emacs ...

随机推荐

  1. 10款免费的MySQL数据库图形化管理工具

    绝大多数的关系数据库都明显不同于MS Access,它们都有两个截然不同的部分:后端作为数据仓库,前端作为用于数据组件通信的用户界面.这种设计非常巧妙,它并行处理两层编程模型,将数据 层从用户界面中分 ...

  2. Android(java)学习笔记111:Java异常分类

    Java异常可分为3种: (1)编译时异常:Java.lang.Exception (2)运行期异常:Java.lang.RuntimeException (3)错误:Java.lang.Error

  3. (原)IPhone开发时把ToolBar中的元素居中的技巧

    在IPhone应用开发时,经常用到ToolBar,其中的控件通常都是居左,想让它居中就有点困难. 这里介绍一种方法: 将Flexible Space Bar Button Item从库中拖到位于控件左 ...

  4. 厌食?暴食?试试这个 VR 新疗法

    今日导读 “我知道我要吃饭,但我真的什么都吃不下.” “我脑子里想的只有吃东西,吃吃吃!” ....... 作为一个正常人,我们完全无法想象患厌食症或贪食症人群所受的痛苦.长期的厌食,会使一个人瘦的只 ...

  5. 使用Python生成ASCII字符画

    使用Python生成ASCII字符画 在很多的网站主页中或者程序的注释中会有一些好看的字符注释画.显得很牛逼的样子 例如: 知乎 _____ _____ _____ _____ /\ \ /\ \ / ...

  6. Django 的母板及布局(Bootstrap)

    title: Django 的母板及布局(Bootstrap) tags: Django --- Django 的母板及布局(Bootstrap) Django 的母板是作为公共的部分,其他的页面都能 ...

  7. Linux curl命令中,HTTP 302处理

    在Linux中使用curl命令时,偶尔会遇到一些URL跳转到新的URL,即HTTP中的3XX(redirection,重定向 ). $curl -s -I $URL > log 这时在返回的报文 ...

  8. 吐槽在cocos2dx游戏接入腾讯信鸽的坑

    腾讯信鸽是用来在后台推送消息给移动应用客户端使用,接入方法很简单,在信鸽官网注册个账号 http://xg.qq.com/xg,然后注册一个应用,在后台页面获得ACCESS ID, ACCESS KE ...

  9. Chunky Monkey-freecodecamp算法题目

    Chunky Monkey(猴子吃香蕉, 分割数组) 要求 把一个数组arr按照指定的数组大小size分割成若干个数组块. 思路 利用size值和while语句确定切割数组的次数(定义temp将siz ...

  10. 【转】Qt Socket简单通信

    最近要用到Qt的Socket部分,网上关于这部分的资料都比较复杂,我在这总结一下,把Socket的主要部分提取出来,实现TCP和UDP的简单通信. 1.UDP通信 UDP没有特定的server端和cl ...