# redux-kits

> Support working with Redux

Latest version **0.7.2** (published 2021-10-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-kits
pnpm add redux-kits
yarn add redux-kits
bun add redux-kits
```

## Health

**Score 40/100 (D)** — status: abandoned.

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

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.7.2 |
| Published | 2021-10-22 |
| First published | 2020-06-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 345.6 KB |
| Known vulnerabilities | 0 (+7 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Karona Tourn |
| Maintainers | tournkarona |
| Keywords | redux-kits |

## Links

- npm: https://www.npmjs.com/package/redux-kits
- Repository: https://github.com/Karona-Tourn/redux-kits
- Homepage: https://github.com/Karona-Tourn/redux-kits#readme
- Issues: https://github.com/Karona-Tourn/redux-kits/issues
- npm.io page: https://npm.io/package/redux-kits

## Dependencies (3)

- [qs](https://npm.io/package/qs.md) 6.9.6
- [immer](https://npm.io/package/immer.md) 8.0.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.21

## Recent versions

- 0.7.2 (latest) — 2021-10-22
- 0.7.1 — 2021-03-22
- 0.7.0 — 2021-03-22
- 0.6.7 — 2021-03-04
- 0.6.6 — 2021-02-16
- 0.6.5 — 2021-02-07
- 0.6.4 — 2021-02-03
- 0.6.3 — 2021-02-03
- 0.6.2 — 2021-01-31
- 0.6.1 — 2021-01-31
- 0.6.0 — 2021-01-30
- 0.5.2 — 2021-01-19
- 0.5.1 — 2021-01-08
- 0.5.0 — 2021-01-08
- 0.4.0 — 2020-09-19
- … 12 more at https://npm.io/package/redux-kits/versions

## README

# redux-kits

Support you working with async work in Redux. This relies on Redux Saga.

You also need to install [redux](https://redux.js.org/introduction/installation#redux-core), [react-redux](https://react-redux.js.org/introduction/quick-start) and [redux-saga](https://redux-saga.js.org).

Document [here](https://karona-tourn.github.io/redux-kits)

## Installation

```sh
npm install redux-kits
```

or

```sh
yarn add redux-kits
```

## Motiviation

```javascript
// Action
const fetchCart = () => ({
  type: 'FETCH_CART',
});
```

```javascript
// Previously, I wrote the following code

// Reducer
const carts = (state = { data: null, pending: false, error: null }, action) => {
  switch (action.type) {
    case 'FETCH_CART_PENDING':
    // return updated state telling fetching cart is pending
    case 'FETCH_CART_SUCCESS':
    // return updated state with provided data of payload
    case 'FETCH_CART_FAIL':
    // return updated state with error data
    default:
      return state;
  }
};

// Saga
function* watchFetchCart() {
  yield takeLatest('FETCH_CART', function* () {
    try {
      yield put({ type: 'FETCH_CART_PENDING' });

      // Request to server to fetch cart data

      yield put({ type: 'FETCH_CART_SUCCESS', payload: response });
    } catch (error) {
      yield put({ type: 'FETCH_CART_FAIL', payload: error });
    }
  });
}
```

```javascript
import {
  createAsyncReducer,
  createAsyncPagingReducer,
  createAsyncWatcher,
  createAsyncPagingWatcher,
  ActionTypeMaker,
  ActionCreator,
} from 'redux-kits';

// Now, I wrote the following code
// Actions
const fetchCart = () => ({
  type: 'FETCH_CART',
});

// Reducer
const carts = createAsyncReducer('FETCH_CART');

// Saga
const watchFetchCart = createAsyncWatcher({
  actionPrefix: 'FETCH_CART',
  getPromises: () => [() => fetch('fetch_cart_url')],
});

// NOTE: you use like this too with redux-kits. But there will be changes you need to update with action creator and watcher.
const fetchCart = () => ({
  type: 'FETCH_CART',
  http: [
    {
      url: 'fetch_cart_url',
      method: 'GET',
    },
  ],
});

const watchFetchCart = createAsyncWatcher({
  actionPrefix: 'FETCH_CART',
});
```

```javascript
// More advance code working with pagination

// Actions
const fetchCart = ({ firstOffset, limit, clear }) => ({
  type: 'FETCH_CART',
  payload: {
    firstOffset,
    limit,
    clear,
  },
});

const removeCart = (id) => ({
  type: ActionTypeMaker.REMOVE('FETCH_CART'),
  payload: id,
});

const addCart = ({ id, itemName }) => ({
  type: ActionTypeMaker.ADD_LAST('FETCH_CART'),
  payload: {
    id,
    itemName,
  },
});

const clearCart = () => ({
  type: ActionTypeMaker.RESET('FETCH_CART'),
});

// Reducer
const carts = createAsyncPagingReducer('FETCH_CART');

// Saga
const watchFetchCart = createAsyncPagingWatcher({
  actionPrefix: 'FETCH_CART',
  getPromises: (state, action) => [
    () =>
      fetch(
        `fetch_cart_url?offset=${
          action.payload.firstOffset ? 0 : state.carts.offset
        }&limit=${action.payload.limit}`
      ),
  ],
  mapResultToPayload: (state, action, results) => ({
    data: results[0],
  }),
});
```

## License

MIT

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