redux-create-actiontype

Micro library for easy Action Types generation in Redux/React.

Install

$ npm install redux-create-actiontype --save

Usage

Basic Usage

Create a basic object with Action Types:

import createActionTypes from 'redux-create-actiontype';

const types = createActionTypes()(
  'LOGIN',
  'LOGOUT',
  'IS_FETCHING',
  'CREATE_ACTION',
  { 'USER': { api: true } }
);

/* it is going to generate
const types = {
  LOGIN: 'LOGIN',
  LOGOUT: 'LOGOUT',
  IS_FETCHING: 'IS_FETCHING',
  CREATE_ACTION: 'CREATE_ACTION',
  USER_FETCHING: 'USER_FETCHING',
  USER_SUCCESS: 'USER_SUCCESS',
  USER_ERROR: 'USER_ERROR'
};
*/

A nested example which is closer to a real world project:

const types = createActionTypes('my app')(
  'login',
  'logout',
  createActionTypes('users')(
    { 'fetch': { api: true } },
    { 'dialog': { postfixes: ['open', 'close' ]}},
    'send email',
    'eat borscht'
  )
);

/* it is going to generate
const types = {
  MY_APP_LOGIN: 'MY_APP_LOGIN',
  MY_APP_LOGOUT: 'MY_APP_LOGOUT',
  MY_APP_USERS_FETCH_FETCHING: 'MY_APP_USERS_FETCH_FETCHING',
  MY_APP_USERS_FETCH_SUCCESS: 'MY_APP_USERS_FETCH_SUCCESS',
  MY_APP_USERS_FETCH_ERROR: 'MY_APP_USERS_FETCH_ERROR',
  MY_APP_USERS_DIALOG_OPEN: 'MY_APP_USERS_DIALOG_OPEN',
  MY_APP_USERS_DIALOG_CLOSE: 'MY_APP_USERS_DIALOG_CLOSE',
  MY_APP_USERS_SEND_EMAIL: 'MY_APP_USERS_SEND_EMAIL',
  MY_APP_USERS_EAT_BORSCHT: 'MY_APP_USERS_EAT_BORSCHT'
};
*/

Advanced Usage:

Generating API Action Types

const types = createActionTypes('my app')(
  'login',
  'logout',
  { 'user': { api: true } }
);

/* it is going to generate
const types = {
  MY_APP_LOGIN: 'MY_APP_LOGIN',
  MY_APP_LOGOUT: 'MY_APP_LOGOUT',
  MY_APP_USER_FETCHING: 'MY_APP_USER_FETCHING',
  MY_APP_USER_SUCCESS: 'MY_APP_USER_SUCCESS',
  MY_APP_USER_ERROR: 'MY_APP_USER_ERROR',
};
*/

Pre-define custom API postfixes

const types = createActionTypes({
  prefix: 'my app',
  apiPostfixes: ['OK', 'BAD']
})(
  'login',
  'logout',
  { 'user': { api: true } },
  { 'items': { api: true } }
);

/* it is going to generate
const types = {
  MY_APP_LOGIN: 'MY_APP_LOGIN',
  MY_APP_LOGOUT: 'MY_APP_LOGOUT',
  MY_APP_USER_OK: 'MY_APP_USER_OK',
  MY_APP_USER_BAD: 'MY_APP_USER_BAD',
  MY_APP_ITEMS_OK: 'MY_APP_ITEMS_OK',
  MY_APP_ITEMS_BAD: 'MY_APP_ITEMS_BAD'
};
*/

Custom postfixes for a custom Action Type

const types = createActionTypes('my app')(
  'login',
  'logout',
  { 'dialog': { postfixes: ['open', 'close'] } }
);

/* it is going to generate
const types = {
  MY_APP_LOGIN: 'MY_APP_LOGIN',
  MY_APP_LOGOUT: 'MY_APP_LOGOUT',
  MY_APP_DIALOG_OPEN: 'MY_APP_DIALOG_OPEN',
  MY_APP_DIALOG_CLOSE: 'MY_APP_DIALOG_CLOSE'
};
*/

// OR
// the following code yields the same results
const types = createActionTypes('my app')(
  'login',
  'logout',
  createActionTypes('dialog')(
    'open',
    'close'
  )
);

(support for another style) Set a lower-case prefix with / as a separator

const types = createActionTypes({
  prefix: 'my app',
  prefixUpperCase: false,
  separator: '/'
})(
  'login',
  'logout'
);

/* it is going to generate
const types = {
  'my_app/LOGIN': 'my_app/LOGIN',
  'my_app/LOGOUT': 'my_app/LOGOUT'
};
*/

deep structured actions

const types = createActionTypes('my app')(
  'login',
  'logout',
  createActionTypes('dialog')(
    'open',
    'close',
    createActionTypes('input')(
      'change',
      'on focus'
    )
  )
);

/* it is going to generate
const types = {
  MY_APP_LOGIN: 'MY_APP_LOGIN',
  MY_APP_LOGOUT: 'MY_APP_LOGOUT',
  MY_APP_DIALOG_OPEN: 'MY_APP_DIALOG_OPEN',
  MY_APP_DIALOG_CLOSE: 'MY_APP_DIALOG_CLOSE',
  MY_APP_DIALOG_INPUT_CHANGE: 'MY_APP_DIALOG_INPUT_CHANGE',
  MY_APP_DIALOG_INPUT_ON_FOCUS: 'MY_APP_DIALOG_INPUT_ON_FOCUS'
};
*/

Options

const types = createActionTypes({
  prefix,     // string prefix for all elements in array of types. default is ''
  separator,  // string character which is separates prefix and each element type. default is '_'
  upperCase,  // bool. it will set to upper case each key if set to true. default is true
  prefixUpperCase // bool. it will set to upper case the prefix if set to true. default is true
})(arrayOfTypes);

Default API Postfixes

const defaultAPIPostfixes = [
  'FETCHING',
  'ERROR',
  'SUCCESS'
];

Full list of examples

You can find more examples in my test file.

Feedback

For any ideas, suggestion or bugs feel free to ping me or create a ticket right here.

License

MIT license; see LICENSE.