摘要:引入,有效解決事件分發時,事件類型的一致性以及清晰邏輯性。其實,細心思考,不難發現,隨著項目增大。目錄將會隨著數據處理事件迅速膨脹。大家一直維護著這個事件命名機制,身心疲憊有木有。其實,隨著項目增大,獨立出來的也會導致非常麻煩的維護問題。
作者: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 } }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78188.html
摘要:引入,有效解決事件分發時,事件類型的一致性以及清晰邏輯性。其實,細心思考,不難發現,隨著項目增大。目錄將會隨著數據處理事件迅速膨脹。大家一直維護著這個事件命名機制,身心疲憊有木有。其實,隨著項目增大,獨立出來的也會導致非常麻煩的維護問題。 作者:Jogis原文鏈接:https://github.com/yesvods/Blog/issues/4轉載請注明原文鏈接以及作者信息 前言 事情...
摘要:,之前在介紹的時候圖表君還是留了問題。下邊說幾句非技術的話題,技術的道路做久了,都會考慮到技術路線的問題,作為一個年輕人圖表君并沒有太多的經驗,但是上周看到了池建強老師的一篇文章,說的挺好,在這里分享給大家。 大家周末好,天氣這是越來越冷了,冬季到來了。西安冬日的傳統霧霾又上演了,不過最近又限行了,希望能有點用處吧。好了今天不說什么新的東西,把之前的坑給填一填吧。 上篇文章的最后給大家...
摘要:圖表君聊開篇今天是圖表君聊的第一篇,為什么會有這個系列呢容器技術出現已經有一段時間了,之前零零星星的也看過一些文章,圖表君的項目上也在使用。至于,圖表君沒試過,官網有的教程,大家可以參考。上的官網,安裝,然后跟著圖表君一起學習吧。 圖表君聊Docker-開篇 今天是圖表君聊Docker的第一篇,為什么會有這個系列呢?容器技術Docker出現已經有一段時間了,之前零零星星的也看過一些文章...
摘要:今日勵志語錄有志者自有千計萬計,無志者只感千難萬難。三動畫技術越來越不陌生,使用門檻也漸漸降低,而且動畫還可以使用控制。掃一掃查看效果打開微掃一掃關注早讀君,每天早晨為你推送前端知識,度過擠地鐵坐公交的時光 今日勵志語錄有志者自有千計萬計,無志者只感千難萬難。 文章原出處:騰訊ISUX 開始閱讀之前你可以先掃一掃體驗demoshowImg(https://segmentfault.co...
閱讀 1376·2021-11-04 16:11
閱讀 3036·2021-10-12 10:11
閱讀 2969·2021-09-29 09:47
閱讀 1608·2021-09-22 15:40
閱讀 1007·2019-08-29 15:43
閱讀 2798·2019-08-29 13:50
閱讀 1572·2019-08-29 13:28
閱讀 2685·2019-08-29 12:54