Nature Preceded Machines

    react-redux-action-dispatchers-hook
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.12 • Public • Published

    react-redux-create-action-dispatchers

    Description

    Short: Transform action creators into action dispatchers

    This simple make the code a tiny more clean. (See example's)

    Example

    See demo here (editable codesandbox.io)

    import React, { FC } from "react";
     
    import useCreateActionDispatchers from "react-redux-action-dispatchers-hook";
     
    const MyActionCreators = {
      action1: (name: string) => ({ type: "action1", name }),
      action2: (num: number) => ({ type: "action2", num })
    };
     
    export const useMyActions = () => useCreateActionDispatchers(MyActionCreators);
     
    export const MyComponent: FC = () => {
      const { action1, action2 } = useMyActions();
      return (
        <div>
          <button onClick={() => action1("SomeName")}>Action 1</button>
          <button onClick={() => action2(42)}>Action 2</button>
        </div>
      );
    };

    Or you can add properties for the area with useCreateArea

    import { useCreateArea } from "react-redux-action-dispatchers-hook";
    //(...)
     
    export const useMyActions = () =>
      useCreateArea(MyActionCreators, (state: IStore) => state.area);
     
    export const MyComponent: FC = () => {
      const { prop1, prop2, action1, action2 } = useMyActions();
      return (
        <div>
          <button onClick={() => action1("SomeName")}>{prop1}</button>
          <button onClick={() => action2(42)}>{prop2}</button>
        </div>
      );
    };

    Install

    npm install react-redux-action-dispatchers-hook

    Or

    yarn add react-redux-action-dispatchers-hook

    Usage

    1) Create hook from

    Create a plainObject with all your action creators like 'MyActionCreators'

    const MyActionCreators = {
      action1: (name: string) => ({ type: "action1", name }),
      action2: (num: number) => ({ type: "action2", num })
    };

    Or

    // action-creators are defined other place
    const MyActionCreators = {
      action1,
      action2 
    };

    2) Create hook from

    Create hook by passing the plainObject into CreateActionDispatchers

    import CreateActionDispatchers from "react-redux-action-dispatchers-hook";
     
    export const useMyActions = () => CreateActionDispatchers(MyActionCreators);

    3) Use you new actions

    The action dispatcher can now be called the same way as the original action creators, but they will also dispatch them (using reacts useDispatch)

    const MyComponent: FC = () => {
      const { action1, action2 } = useMyActions();
      return (
        <div>
          <button onClick={() => action1("SomeName")}>Action 1</button>
          <button onClick={() => action2(42)}>Action 2</button>
        </div>
      );
    };

    How it does it

    The code below does the same thing.

    As you can see, the only thing react-redux-action-dispatchers-hook does is making the code a little more clean.

    const MyComponent: FC = () => {
      const dispatch = useDispatch();
      const { action1, action2 } = MyActionCreators;
      return (
        <div>
          <button onClick={() => dispatch(action1("SomeName"))}>Action 1</button>
          <button onClick={() => dispatch(action2(42))}>Action 2</button>
        </div>
      );
    };

    Install

    npm i react-redux-action-dispatchers-hook

    DownloadsWeekly Downloads

    9

    Version

    0.0.12

    License

    ISC

    Unpacked Size

    10.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • alfnielsen