# redux-async-helper

> A tool to help reducing redux code boilerplate for general async usage

Latest version **0.1.5** (published 2018-09-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-async-helper
pnpm add redux-async-helper
yarn add redux-async-helper
bun add redux-async-helper
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2018-09-06 |
| First published | 2018-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rakha Kanz Kautsar |
| Maintainers | rkkautsar |
| Keywords | redux, async, react, utils, es6 |

## Links

- npm: https://www.npmjs.com/package/redux-async-helper
- Repository: https://github.com/rkkautsar/redux-async-helper
- Homepage: https://github.com/rkkautsar/redux-async-helper#readme
- Issues: https://github.com/rkkautsar/redux-async-helper/issues
- npm.io page: https://npm.io/package/redux-async-helper

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.5 (latest) — 2018-09-06
- 0.1.4 — 2018-09-06
- 0.1.2 — 2018-09-05
- 0.1.1 — 2018-09-05

## README

# Redux Async Helper

![GitHub](https://img.shields.io/github/license/rkkautsar/redux-async-helper.svg?style=flat-square)
![GitHub package version](https://img.shields.io/github/package-json/v/rkkautsar/redux-async-helper.svg?style=flat-square)
![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/redux-async-helper.svg?style=flat-square)
[![npm](https://img.shields.io/npm/dt/redux-async-helper.svg?style=flat-square)](https://www.npmjs.com/package/redux-async-helper)

Opinionated way to reduce boilerplate on async (or sync) logic, like fetching data etc.
Zero dependency (Although it only makes sense to use together with `Redux` AND `Redux Thunk`).

## Installation

```sh
npm i redux-async-helper
```

## Usage

See [example usage](example).

Basically, we have these utilities:

1. [createAction](#createaction)
2. [createReducer](#createreducer)
3. [createAsyncActions](#createasyncactions)
4. [asyncInitialState](#asyncinitialstate)
5. [createAsyncHandlers](#createasynchandlers)
6. [createAsyncThunk](#createasyncthunk)

### createAction

This is a simplified version of the one used in [redux-act](https://github.com/pauldijou/redux-act).

```js
const myAction = createAction('my_action');
myAction.toString(); // my_action
myAction(); // { type: 'my_action', payload: null, error: false }
myAction({ my: 'payload' }); // { type: 'my_action', payload: { my: 'payload' }, error: false }
myAction(new Error('error'))); // { type: 'my_action', payload: Error('error'), error: true }
```

### createReducer

This is a helper function to make reducer based on handlers. Basically a handler is a function
receiving two arguments, `state` and `payload` and returns the modified state.

```js
const myHandlers = {
  [myAction]: state => ({ ...state, count: state.count + 1 })
};

const myInitialState = {
  count: 0
};

const myReducer = createReducer(myHandlers, myInitialState);
```

### createAsyncActions

Used to make a set of actions (request, success, fail, reset) to be used in other async helpers.

### asyncInitialState

An opinionated state for holding async state and data. Used with other async helpers.

### createAsyncHandlers

Used to make a set of handlers for the async actions generated with
[createAsyncActions](#createasyncactions). This function also allows you to hook on each
async state with another handlers (`onRequest`, `onSuccess`, `onFail`). Received to arguments,
the async actions and hook handlers.

```js
const myFetchingHandlers = createAsyncHandlers(myAsyncActions, {
  onSuccess: state => ({ ...state, progress: 100 })
});

const myHandlers = {
  ...myFetchingHandlers
  // ... other handlers
};
```

### createAsyncThunk

Used to create a thunk (see [redux-thunk](https://github.com/reduxjs/redux-thunk)) for starting
(request) the async function. Received three arguments: async actions, the async function, and
options, which includes hooks for success (`onSuccess`) and fail (`onFail`), each receiving
the `dispatch` and `getState` as any other thunks. The async function is expected to resolve
the data (which will be placed in `data` key in the state tree produced by
[initialAsyncState](#initialasyncstate)),
any errors caught will be placed in the `error` key.

```js
const apiFetch = async () => {
  try {
    const response = await axios.get('/users');
    return response.data;
  } catch (err) {
    throw err;
  }
};

const fetchThunk = createAsyncThunk(actions, apiFetch, {
  onSuccess: () => console.log('success!')
});
```

---
_Source: https://npm.io/package/redux-async-helper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._