滾蛋吧!constant 君

做者: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_ITEMnpm

  • reducers/comB.js改幾個store/reducerredux

  • actions/comB.js改幾個actionreact-router

慢着....
好像comC,comD,comE都有這個constantapp

問題由來

咳咳,膝蓋中箭的有木有,站出來!其實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-mirrorflux-constants的庫都耐不住寂寞了,站出來聲張正義。
可是,這些庫其中一個致命共同點:

  • 咱們都依舊須要維護一套constants

  • 不一樣組件使用的constants依舊有可能會由於重複致使不可預知的問題

react-constant

簡介

就一句話:

Fuck Off constants.js

咱們不再須要去維護任何的與constant有關的文件,也不須要處處去找constants/comA.jsreducer/comA.jsaction/comA.js一個個去改命名。

  • 把全部constant相關文件去掉,react-constant爲您打理得層次分明

  • 自定義命名空間的constant,comA的HIDE_ITEM和comB的HIDE_ITEM可不同,自家用自家的,互不侵犯。

  • 自動生成僞uuid格式的constant,不用再爲生成格式打個null

  • 2kb大小(minified),任何地方的貼心小助手

  • 單元測試,100% coverage

使用過程至關簡單,沒有任何多餘的代碼

Usage

Install

npm install react-constant --save

Import & 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

<script src="dist/constant.min.js"></script>

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
  }
}
相關文章
相關標籤/搜索