create-action-ts
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

create-action-ts

NPM version Dependency status Travis build status

Helper to create typed actions or action creators in React+Redux+TypeScript apps.

Install

With npm:

$ npm install --save create-action-ts

With yarn:

$ yarn add create-action-ts

Usage

Syntax
createAction(type[, payload, meta]);

Parameters:

  • typeRequired. String as a type of the action.
  • payload — Any type of payload.
  • meta — Any type of meta information.
Create action
const action = createAction('counter', 5);
 
// -> { type: "counter", payload: 5 }
Create action creators
const actionCreator = (count: string) => createAction('counter', count);
 
// -> (count: string): { type: "counter", payload: string }
Example

Let's say, you have a structure of the container below:

├─ components
└─ containers
    └─ SomePage
        ├─ actions.ts
        ├─ constants.ts
        ├─ index.tsx
        ├─ reducer.ts
        └─ types.ts
  1. Describe possible action keys by enum from TypeScript:
/* constants.ts */
 
export enum ActionKeys {
    SET_USER_INFO = 'SET_USER_INFO',
    RESET_USER_INFO = 'RESET_USER_INFO',
    TOGGLE_ACCORDION = 'TOGGLE_ACCORDION',
}
  1. Create Action creators by createAction() function:
/* actions.ts */
 
import createAction from 'create-action-ts';
import { ActionKeys } from 'constants.ts';
 
export const setUserInfo = (id: string) => createAction(ActionKeys.SET_USER_INFO, id);
export const resetUserInfo = () => createAction(ActionKeys.RESET_USER_INFO);
export const toggleAccordion = (meta: { name: string }) => createAction(ActionKeys.TOGGLE_ACCORDION, null, meta);
  1. Describe all types of the Action creators and the Actions we need:
/* types.ts */
 
import { resetUserInfo, setUserInfo, toggleAccordion } from 'actions.ts';
 
export type SetUserInfoActionCreator = typeof setUserInfo;
export type ResetUserInfoActionCreator = typeof resetUserInfo;
export type ToggleAccordionActionCreator = typeof toggleAccordion;
 
export type ActionType = 
    ReturnType<SetUserInfoActionCreator> |
    ReturnType<ResetUserInfoActionCreator> |
    ReturnType<ToggleAccordionActionCreator>;
  1. Use the types in reducer:
/* reducer.ts */
 
import { ActionKeys } from 'constants.ts';
import { ActionType, StoreType } from 'types.ts';
 
export default function reducer(state: StoreType, action: ActionType) {
    switch (action.type) { /* ... */ }
}

container's template:

/* index.tsx */
 
import React, { PureComponent } from 'react';
import { SetUserInfoActionCreator, ResetUserInfoActionCreator, ToggleAccordionActionCreator } from 'types.ts';
 
interface PropsType {
    resetUserInfo: ResetUserInfoActionCreator,
    setUserInfo: SetUserInfoActionCreator,
    toggleAccordion: ToggleAccordionActionCreator,
}
 
class Page extends PureComponent<PropsType> {
    render() { /* ... */ }
}

or anywhere else...

Test

$ git clone git@github.com:ahtohbi4/create-action-ts.git
$ cd create-action-ts
$ npm install
$ npm run test

Dependencies (0)

    Dev Dependencies (8)

    Package Sidebar

    Install

    npm i create-action-ts

    Weekly Downloads

    1

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    7.66 kB

    Total Files

    7

    Last publish

    Collaborators

    • ahtohbi4