Skip to content

Commit

Permalink
Added babel plugin and smart methods
Browse files Browse the repository at this point in the history
  • Loading branch information
klis87 committed Jul 9, 2020
1 parent 8393e11 commit 5b647b6
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 5 deletions.
55 changes: 52 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,21 @@ Redux addon to create actions and thunks with minimum boilerplate
Why yet another Redux action creation library? Because:
- writing Redux actions without any addon requires writing constants which is very verbose and error-prone
- other addons often force conventions about action structure
- other addons still require to pass strings as first argument to define action type - here you won't have to with optional Babel plugin
- some addons solve problem with unique types aucomatically, but then they are not determenistic (TODO)
- this library also provides thunks creators - you can create thunk like normal action and also forget about types

## Installation

To install the package, just run:
```
```bash
$ npm install redux-smart-actions
```
or you can just use CDN: `https://unpkg.com/redux-smart-actions`.

## Usage

### createAction
### `createAction`

Let's say you have an action written without any addon:
```js
Expand Down Expand Up @@ -58,7 +59,7 @@ const doSth = createAction('DO_STH', x => ({ x }));
Basically 2nd argument is an action creator, you write it like usually, just you don't
need to worry about `type`.

### createThunk
### `createThunk`

If you happen to use `redux-thunk`, you might like using `createThunk` from this library.
Often you need to use thunks which looks very similar to normal actions, but they need to
Expand Down Expand Up @@ -92,6 +93,54 @@ So what changed? `doSth.toString() === 'DO_STH'`, so you can use `doSth` in redu
like constants didn't even exist. Also notice that we do not dispatch `{ x: state.x }` action,
we return it, `createThunk` will add `type` for us and dispatch it automatically.

## Babel plugin

This plugin it totally optional, but very recommended. With just no work you will be able
to omit first arguments (action types) for both `createAction` and `createThunk` -
they will be taken from action name automatically!

To install it, just run:
```bash
npm install --save-dev babel-plugin-redux-smart-action
```

and add it to babel plugins, for example in `.babelrc`:
```json
{
"plugins": [
"redux-smart-actions"
]
}
```

Then, you could use new functions from this library.

### `createSmartAction`

```js
import { createSmartAction } from 'redux-smart-actions';

const doSth = createSmartAction();

const doSthElse = createSmartAction(x => ({ x }));
```

which would be the same as:
```js
import { createAction } from 'redux-smart-actions';

const doSth = createAction('doSth');

const doSthElse = createAction('doSthElse', x => ({ x }));
```

which saves you any need to pass action type strings manually.

### `createSmartThunk`

The cousin of `createSmartAction`, the usage is the same, just use `createSmartThunk`
instead of `createThunk` and omit the first string argument - it will be again
interpolated from variable name you attach thunk to.

## Licence

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "redux-smart-actions",
"version": "0.1.0",
"version": "0.2.0",
"description": "Redux addon to create actions and thunks with minimum boilerplate",
"main": "lib/index.js",
"module": "es/index.js",
Expand Down
17 changes: 16 additions & 1 deletion types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,22 @@ export function createAction<Output = {}, Input extends any[] = any>(

export function createThunk<Output = {}, Input extends any[] = any>(
name: string,
thunk?: (
thunk: (
...params: Input
) => (dispatch: (action: any) => any, getState: () => any) => Output,
): (
...params: Input
) => (
dispatch: (action: any) => any,
getState: () => any,
) => Output & { type: string };

export function createSmartAction<Output = {}, Input extends any[] = any>(
action?: (...params: Input) => Output,
): (...params: Input) => Output & { type: string };

export function createSmartThunk<Output = {}, Input extends any[] = any>(
thunk: (
...params: Input
) => (dispatch: (action: any) => any, getState: () => any) => Output,
): (
Expand Down

0 comments on commit 5b647b6

Please sign in to comment.