# redux-thunk-loading-middleware

> This is open-source project of redux thunk loading middleware

Latest version **0.0.8** (published 2020-08-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-thunk-loading-middleware
pnpm add redux-thunk-loading-middleware
yarn add redux-thunk-loading-middleware
bun add redux-thunk-loading-middleware
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2020-08-27 |
| First published | 2020-04-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Vu Phan |
| Maintainers | vuphan365 |

## Links

- npm: https://www.npmjs.com/package/redux-thunk-loading-middleware
- Repository: https://github.com/vuphan365/redux-thunk-loading-middleware
- Homepage: https://github.com/vuphan365/redux-thunk-loading-middleware#readme
- Issues: https://github.com/vuphan365/redux-thunk-loading-middleware/issues
- npm.io page: https://npm.io/package/redux-thunk-loading-middleware

## Recent versions

- 0.0.8 (latest) — 2020-08-27
- 0.0.7 — 2020-08-27
- 0.0.6 — 2020-08-27
- 0.0.5 — 2020-08-27
- 0.0.4 — 2020-08-27
- 0.0.3 — 2020-04-11
- 0.0.2 — 2020-04-11
- 0.0.1 — 2020-04-11

## README

# **Redux-thunk-loading-middleware**

A open-source written for redux thunk, which handle your loading process

## Problem?

Whenever you start a new project with redux thunk, the loading handler always take a lot of time, also it make your code to be huge. With my experience working with this problem, I decide to publish my code as open-source for using and also for others to contribute

## Installation

```dash
npm install --save redux-thunk-loading-middleware
```

## API Document

### 1. Loading Middleware

This is the middleware to handle loading process, be careful to put it before thunk:

```javascript
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { loadingMiddleware } from 'redux-thunk-loading-middleware';

const store = createStore(
  reducers,
  applyMiddleware(loadingMiddleware, thunk),
);
```

### 2. Loading Reducer

This is the reducer handler to work with dispatching from middleware, also store your loading state

```javascript
import { combineReducers } from 'redux';
import { loadingReducer } from 'redux-thunk-loading-middleware';

export default combineReducers({
  loading: loadingReducer,
});
```

## Examples

### 1. Redux action example

Because of using middleware, your function need to set type inside prototype as below

```javascript
const FETCH_COUPON = 'FETCH_COUPON';

export const fetchCoupon = () => {
  // set loading type, which is used in selector
  callWithDispatch.type = FETCH_COUPON;
  async function callWithDispatch(dispatch) {
    try {
      /*
      * async code
      */
      return true;
    } catch (error) {
      console.log(error);
      return false;
    }
  }
  return callWithDispatch;
};
```

### 2. Selector example

```javascript
const isFetchingCoupon = (state) => state.loading[FETCH_COUPON]

// map state to props
const mapStateToProps = (state) => ({
  loading: isFetchingCoupon(state)
})
```

## Community Sites

This part is building, if you have any ideas or issues, you can contact in this Github repository

## License

MIT

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