摘要：刚好最近需要做一个答题小游戏的应用，不想再上全家桶了，一是体积太大，二是无论配置还是写起来都太繁琐。内置的内置的扩展支持内置的热更新模块然后就可以了简单，可控，无痛的开发环境和代码组织。
在学习和使用 Fable + Elmish 一段时间之后，对 Elm 架构有了更具体的了解, 和预料中的一样， 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
{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,
})
然后就可以了！简单，可控，无痛的开发环境和代码组织。
在线 demo
异步使用的是类似 Elm 的副作用管理器风格, actions 可以是完全纯的函数，也可以是直接返回一个 promise: https://github.com/hydux/hydu...
官网: https://github.com/hydux/hydux
官方支持的 React 扩展: https://github.com/hydux/hydu...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/90303.html
摘要：但是，有一件事是肯定的年对全栈开发者的需求量很大。有一些方法可以解决这个问题，例如模式，或者你可以这么想，其实谷歌机器人在抓取单页应用程序时没有那么糟糕。谷歌正在这方面努力推进，但不要指望在年会看到任何突破。 对于什么是全栈开发者并没有一个明确的定义。但是，有一件事是肯定的：2019 年对全栈开发者的需求量很大。在本文中，我将向你概述一些趋势，你可以尝试根据这些趋势来确定你可能要投入的...
摘要：但是，有一件事是肯定的年对全栈开发者的需求量很大。有一些方法可以解决这个问题，例如模式，或者你可以这么想，其实谷歌机器人在抓取单页应用程序时没有那么糟糕。谷歌正在这方面努力推进，但不要指望在年会看到任何突破。 对于什么是全栈开发者并没有一个明确的定义。但是，有一件事是肯定的：2019 年对全栈开发者的需求量很大。在本文中，我将向你概述一些趋势，你可以尝试根据这些趋势来确定你可能要投入的...
摘要：但是，有一件事是肯定的年对全栈开发者的需求量很大。有一些方法可以解决这个问题，例如模式，或者你可以这么想，其实谷歌机器人在抓取单页应用程序时没有那么糟糕。谷歌正在这方面努力推进，但不要指望在年会看到任何突破。 对于什么是全栈开发者并没有一个明确的定义。但是，有一件事是肯定的：2019 年对全栈开发者的需求量很大。在本文中，我将向你概述一些趋势，你可以尝试根据这些趋势来确定你可能要投入的...
摘要：前端每周清单半年盘点之与篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日，宣布将的构建工具由迁移到，引发了很多开发者的讨论。 前端每周清单半年盘点之 React 与 ReactNative 篇 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为...
摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态 声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识 主架构：react, react-router, redux, redux...
阅读 3068·2021-09-28 09:43
阅读 901·2021-09-08 09:35
阅读 1440·2019-08-30 15:56
阅读 1182·2019-08-30 13:00
阅读 2731·2019-08-29 18:35
阅读 1827·2019-08-29 14:07
阅读 3431·2019-08-29 13:13
阅读 1332·2019-08-29 12:40
