做者:Jogis
原文連接:https://github.com/yesvods/Blog/issues/4
轉載請註明原文連接以及做者信息html
事情通過是這樣的,某個陽光明媚的晚上,跟大多數人同樣,在MacBook前靜靜地寫着redux/flux「優美」的詩句。劇情急轉直下:react
└── constants ├── comA.js ├── comB.js ├── comC.js ├── comD.js ├── comE.js └── index.js
index.js看起來是這樣的:webpack
import * from './a'; import * from './b'; ...
好像沒什麼不對勁,而後看了一下a.js和b.js..git
//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";
。。
。。。
。。。。
github
喵的,不一樣組件的constant又寫重複了。因而開始漫長的改constant之旅:web
名字改爲 COMB_HIDE_ITEM
npm
reducers/comB.js改幾個store/reducerredux
actions/comB.js改幾個actionreact-router
慢着....
好像comC,comD,comE都有這個constantapp
咳咳,膝蓋中箭的有木有,站出來!其實constant這個常量在react界最早被flux框架採用,再後來著名的redux(star數已經超過flux),也採用一樣方式定義action與reducer之間的事件分發機制。引入constant,有效解決事件分發時,事件類型的一致性以及清晰邏輯性。
其實一直以來,業界津津樂道的是react的vm
,flux/redux的狀態管理機制
,webpack開發技巧以及插件使用
,react-router入門
etc.
constant如此重要的事件結構機制由於可將性過低,每每被你們忽略。其實,細心思考,不難發現,隨着項目增大。constants目錄將會隨着數據處理事件迅速膨脹。你們一直維護着這個事件命名機制,身心疲憊有木有。
export KeyMirror({ ADD_TODO: null, COMPLETE_TODO: null, SET_VISIBILITY_FILTER: null })
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-mirror、flux-constants的庫都耐不住寂寞了,站出來聲張正義。
可是,這些庫其中一個致命共同點:
咱們都依舊須要維護一套constants
不一樣組件使用的constants依舊有可能會由於重複致使不可預知的問題
就一句話:
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
npm install react-constant --save
//ES5 version var Constant = require('react-constant').Constant; var constants = Constant('mynamespace'); //ES6 version import { Constant } from 'react-constant'; let constants = Constant('mynamespace');
<script src="dist/constant.min.js"></script>
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 } }