redux-define-types v2.1.1

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

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