Metrics
0
Watch 3 Star 3 Fork 0

fwh1990 / redux-define-typesJavaScriptMIT

Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
用babel简化redux types的写法,不再写无聊的types。支持IDE追踪。 spread retract

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

Clone or download
Loading...
README.md

redux-define-types

Define redux types in more easy way.

How to define types in traditional way?

First:

// 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';

Second:

// 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';

But what I say: Your are wasting life.
Exactly, you just repeat your defination every time. The work will make you crazy.

How to define in modern way?

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;


/*
The same as (After compile):
 
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';
*/

Cool, No repeat any more. And the IDE can track your variable easily, because that ACTION_TYPES is an object:

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

Installation

Support Package How to install
Babel 6 1.x yarn add redux-define-types@1.1.0
Babel 7 Current yarn add redux-define-types

npm is also supported.

Do not forget to add babel plugin

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

Options

filePartner

Including the path where you define types. It can make babel transform faster.

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

fileString

Including the path where you define types. It can make babel transform faster.

It can be filename like: "actionTypes.js"
Or a folder like: "/action-types/"

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

typePrefix

Force the beginning of types as specify string. Otherwise, error will be thrown.

{
  "plugins": [
    ["redux-define-types/babel", {"typePrefix": "TYPE_"}]
  ]
}
// x Incorrect input
export const FETCH_DATA = ACTION_TYPES;

// √ Correct input
export const TYPE_FETCH_DATA = ACTION_TYPES;

typeSuffix

Force the end of types as specify string. Otherwise, error will be thrown.

{
  "plugins": [
    ["redux-define-types/babel", {"typeSuffix": "_TYPE"}]
  ]
}
// x Incorrect input
export const FETCH_DATA = ACTION_TYPES;

// √ Correct input
export const FETCH_DATA_TYPE = ACTION_TYPES;

Tests

  1. Clone this repository

  2. Run yarn install

  3. Run yarn run test, and look at the file demo/transform.js

Comments ( 1 )

You need to Sign in for post a comment

Help Search

183227_9af5e6a8_1826025 111910_4d91f001_1826025