Newton's Principia Mathematica

    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
    

    Install

    npm i create-action-ts

    DownloadsWeekly Downloads

    12

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    7.66 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar