开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约

fwh1990 / redux-define-typesJavaScriptMIT

Watch 3 Star 3 Fork 0
加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
用babel简化redux types的写法,不再写无聊的types。支持IDE追踪。 展开 收起

https://github.com/fwh1990/redux-define-types

Loading...
README-CN.md

redux-define-types

用更简单快速的方式定义redux的types

你一般是怎么定义types的?

第一种:

// Group 1
export const FETCH_DATA = 'fetch data prepare';
export const FETCH_DATA_SUCCESS = 'fetch data success';
export const FETCH_DATA_FAIL = 'fetch data fail';

// Group 2
export const CREATE_DATA = 'create data prepare';
export const CREATE_DATA_SUCCESS = 'create data success';
export const CREATE_DATA_FAIL = 'create data fail';

// Group 3
export const SET_LOCAL_CLOCK = 'set local clock';

// Group 4
export const SET_LOCAL_STORAGE = 'set local storage';

第二种:

// Group 1
export const FETCH_DATA = {
  prepare: 'fetch data prepare',
  success: 'fetch data success',
  fail: 'fetch data fail',
};

// Group 2
export const CREATE_DATA = {
  prepare: 'create data prepare',
  success: 'create data success',
  fail: 'create data fail',
};

// Group 3
export const SET_LOCAL_CLOCK = 'set local clock';

// Group 4
export const SET_LOCAL_STORAGE = 'set local storage';

我可以这么说: 你这是在浪费时间
为什么?因为你一直在写重复的代码,这些代码没有任何意义。

有没有更好的方式呢?有

import { ACTION_TYPES, ACTION_SINGLE_TYPE } from 'redux-define-types';

// Group 1
export const FETCH_DATA = ACTION_TYPES;

// Group 2
export const CREATE_DATA = ACTION_TYPES;

// Group 3
export const SET_LOCAL_CLOCK = ACTION_SINGLE_TYPE;

// Group 4
export const SET_LOCAL_STORAGE = ACTION_SINGLE_TYPE;


/*
上面几行编译后的结果就是:
 
export const FETCH_DATA = {
  prepare: 'fetch data prepare',
  success: 'fetch data success',
  fail: 'fetch data fail',
};

export const CREATE_DATA = {
  prepare: 'create data prepare',
  success: 'create data success',
  fail: 'create data fail',
};

export const SET_LOCAL_CLOCK = 'set local clock';

export const SET_LOCAL_STORAGE = 'set local storage';
*/

酷毙了,绝不写两遍types。IDE还可以快速追踪你的types,因为ACTION_TYPES本身就是一个对象:

const ACTION_TYPES = {
    prepare: '',
    success: '',
    fail: '',
};

安装

支持的插件 本插件版本 如何安装
Babel 6 1.x yarn add redux-define-types@1.1.0
Babel 7 当前 yarn add redux-define-types

同时也支持 npm 安装

别忘了添加插件到babel

{
  "plugins": [
    "redux-define-types/babel"
  ]
}

babel参数

filePartner

为了加快babel的编译,可以限定types的文件范围

{
  "plugins": [
    ["redux-define-types/babel", {"filePartner": "types-.*?\.js"}]
  ]
}

fileString

为了加快babel的编译,可以限定types的文件范围

你可以写成文件名: "actionTypes.js"
也可以写成文件夹: "/action-types/"

{
  "plugins": [
    ["redux-define-types/babel", {"fileString": "/action-types/"}]
  ]
}

typePrefix

强制使用某个前缀作为types的开头。不符合的types直接报错

{
  "plugins": [
    ["redux-define-types/babel", {"typePrefix": "TYPE_"}]
  ]
}
// x 错误的写法
export const FETCH_DATA = ACTION_TYPES;

// √ 正确的写法
export const TYPE_FETCH_DATA = ACTION_TYPES;

typeSuffix

强制使用某个前缀作为types的结尾。不符合的types直接报错

{
  "plugins": [
    ["redux-define-types/babel", {"typeSuffix": "_TYPE"}]
  ]
}
// x 错误的写法
export const FETCH_DATA = ACTION_TYPES;

// √ 正确的写法
export const FETCH_DATA_TYPE = ACTION_TYPES;

测试

  1. 克隆这个项目

  2. 执行 yarn install

  3. 执行 yarn run test, 然后查看文件 demo/transform.js 的变化

项目点评 ( 1 )

你可以在登录后,发表评论

搜索帮助