摘要:引入,有效解决事件分发时,事件类型的一致性以及清晰逻辑性。其实,细心思考,不难发现,随着项目增大。目录将会随着数据处理事件迅速膨胀。大家一直维护着这个事件命名机制,身心疲惫有木有。其实,随着项目增大,独立出来的也会导致非常麻烦的维护问题。
作者:Jogis
原文链接:https://github.com/yesvods/Blog/issues/4
转载请注明原文链接以及作者信息
事情经过是这样的,某个阳光明媚的晚上,跟大多数人一样,在MacBook前静静地写着redux/flux“优美”的诗句。剧情急转直下:
└── constants ├── comA.js ├── comB.js ├── comC.js ├── comD.js ├── comE.js └── index.js
index.js看起来是这样的:
import * from "./a"; import * from "./b"; ...
好像没什么不对劲,然后看了一下a.js和b.js..
//a.js export const OPEN_SIDEBAR = "OPEN_SIDEBAR"; export const CLOSE_SIDEBAR = "CLOSE_SIDEBAR"; export const HIDE_ITEM = "HIDE_ITEM"; //b.js export const TOGGLE_LIST = "TOGGLE_LIST"; export const CHANGE_WIDTH = "CHANGE_WIDTH"; export const HIDE_ITEM = "HIDE_ITEM";
。。
。。。
。。。。
喵的,不同组件的constant又写重复了。于是开始漫长的改constant之旅:
名字改成 COMB_HIDE_ITEM
reducers/comB.js改几个store/reducer
actions/comB.js改几个action
慢着....
好像comC,comD,comE都有这个constant
咳咳,膝盖中箭的有木有,站出来!其实constant这个常量在react界最先被flux框架采用,再后来著名的redux(star数已经超过flux),也采用同样方式定义action与reducer之间的事件分发机制。引入constant,有效解决事件分发时,事件类型的一致性以及清晰逻辑性。
constant的悲惨经历其实一直以来,业界津津乐道的是react的vm,flux/redux的状态管理机制,webpack开发技巧以及插件使用,react-router入门 etc.
constant如此重要的事件结构机制因为可将性太低,往往被大家忽略。其实,细心思考,不难发现,随着项目增大。constants目录将会随着数据处理事件迅速膨胀。大家一直维护着这个事件命名机制,身心疲惫有木有。
constant发展 constant由一开始的flux风格,配合facebook插件库export KeyMirror({ ADD_TODO: null, COMPLETE_TODO: null, SET_VISIBILITY_FILTER: null })再到小项目维护的constant,非常容易导致重复
export const ADD_TODO = "ADD_TODO" export const COMPLETE_TODO = "COMPLETE_TODO" export const SET_VISIBILITY_FILTER = "SET_VISIBILITY_FILTER"
引用redux文档的原话:
Types should typically be defined as string constants. Once your app is large enough, you may want to move them into a separate module.
看到刚刚LZ的经历,大家可以发现。其实,constant随着项目增大,独立出来的constants也会导致非常麻烦的维护问题。
constant的进化类似constant-mirror、flux-constants的库都耐不住寂寞了,站出来声张正义。
但是,这些库其中一个致命共同点:
我们都依旧需要维护一套constants
不同组件使用的constants依旧有可能会因为重复导致不可预知的问题
react-constant 简介就一句话:
Fuck Off constants.js
我们再也不需要去维护任何的与constant有关的文件,也不需要到处去找constants/comA.js、reducer/comA.js、action/comA.js一个个去改命名。
把所有constant相关文件去掉,react-constant为您打理得井井有条
自定义命名空间的constant,comA的HIDE_ITEM和comB的HIDE_ITEM可不一样,自家用自家的,互不侵犯。
自动生成伪uuid格式的constant,不用再为生成格式打个null
2kb大小(minified),任何地方的贴心小助手
单元测试,100% coverage
使用过程相当简单,没有任何多余的代码 Usage Installnpm install react-constant --saveImport & Instance Webpack/Browserify
//ES5 version var Constant = require("react-constant").Constant; var constants = Constant("mynamespace"); //ES6 version import { Constant } from "react-constant"; let constants = Constant("mynamespace");browser Just do it
reducer.js
function reducer(state, action){ switch(action.type){ case constants.of("ON"): //TODO break; case constants.of("OFF"): //TODO break; default: return state; } }
action.js
function toggleLight(flag){ return { type: constants.ON, flag: flag } }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/49675.html
摘要:引入,有效解决事件分发时,事件类型的一致性以及清晰逻辑性。其实,细心思考,不难发现,随着项目增大。目录将会随着数据处理事件迅速膨胀。大家一直维护着这个事件命名机制,身心疲惫有木有。其实,随着项目增大,独立出来的也会导致非常麻烦的维护问题。 作者:Jogis原文链接:https://github.com/yesvods/Blog/issues/4转载请注明原文链接以及作者信息 前言 事情...
摘要:,之前在介绍的时候图表君还是留了问题。下边说几句非技术的话题,技术的道路做久了,都会考虑到技术路线的问题,作为一个年轻人图表君并没有太多的经验,但是上周看到了池建强老师的一篇文章,说的挺好,在这里分享给大家。 大家周末好,天气这是越来越冷了,冬季到来了。西安冬日的传统雾霾又上演了,不过最近又限行了,希望能有点用处吧。好了今天不说什么新的东西,把之前的坑给填一填吧。 上篇文章的最后给大家...
摘要:图表君聊开篇今天是图表君聊的第一篇,为什么会有这个系列呢容器技术出现已经有一段时间了,之前零零星星的也看过一些文章,图表君的项目上也在使用。至于,图表君没试过,官网有的教程,大家可以参考。上的官网,安装,然后跟着图表君一起学习吧。 图表君聊Docker-开篇 今天是图表君聊Docker的第一篇,为什么会有这个系列呢?容器技术Docker出现已经有一段时间了,之前零零星星的也看过一些文章...
摘要:今日励志语录有志者自有千计万计,无志者只感千难万难。三动画技术越来越不陌生,使用门槛也渐渐降低,而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君,每天早晨为你推送前端知识,度过挤地铁坐公交的时光 今日励志语录有志者自有千计万计,无志者只感千难万难。 文章原出处:腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...
阅读 2382·2021-11-23 09:51
阅读 1189·2021-11-22 13:54
阅读 3404·2021-09-24 10:31
阅读 1007·2021-08-16 10:46
阅读 3606·2019-08-30 15:54
阅读 651·2019-08-30 15:54
阅读 2867·2019-08-29 17:17
阅读 3139·2019-08-29 15:08