# reduxie

> redux library to persist state through IndexedDB using middleware utility

Latest version **1.3.3** (published 2020-01-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install reduxie
pnpm add reduxie
yarn add reduxie
bun add reduxie
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.3 |
| Published | 2020-01-22 |
| First published | 2019-05-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | jay, mikey, chetbaby, roy |
| Maintainers | reduxie-user |
| Keywords | react, redux, dexie, indexeddb, pwa, offline, typescript, state, persistence, caching, cache |

## Links

- npm: https://www.npmjs.com/package/reduxie
- Repository: https://github.com/reduxie/middleware
- Homepage: https://github.com/reduxie/middleware#readme
- Issues: https://github.com/RadicalRoy/middleware/issues
- npm.io page: https://npm.io/package/reduxie

## Dependencies (1)

- [dexie](https://npm.io/package/dexie.md) ^2.0.4

## 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

- 1.3.3 (latest) — 2020-01-22
- 1.3.2 — 2020-01-22
- 1.3.1 — 2020-01-22
- 1.3.0 — 2020-01-22
- 1.2.9 — 2019-08-29
- 1.2.8 — 2019-06-05
- 1.2.7 — 2019-06-05
- 1.2.6 — 2019-06-05
- 1.2.5 — 2019-06-05
- 1.2.4 — 2019-05-29
- 1.2.3 — 2019-05-29
- 1.2.2 — 2019-05-29
- 1.2.1 — 2019-05-29
- 1.2.0 — 2019-05-29
- 1.1.9 — 2019-05-28
- … 18 more at https://npm.io/package/reduxie/versions

## README

# Reduxie
---
### Description
Asynchronous Redux state initialization and offline caching using the Dexie `IndexedDB` API wrapper.

### Purpose
Reduxie solves the problem of efficient state persistence for your web application. Its lightweight developer experience enhances the Redux store to automatically cache state updates without blocking the main thread. This is particularly synergistic with progressive web apps utilizing service workers for a completely offline experience.

#### TypeScript
Reduxie is built in TypeScript and includes type files!

### Install

```npm install reduxie```

### Use
Import statement:<br>
```import Reduxie from 'reduxie';```

Wrap your reducers by passing the combined reducers to Reduxie's OuterReducer: `Reduxie.OuterReducer(reducers)`

*store.js*
```javascript

const configs = {throttleTime: 500, deleteCount: 20};

const store = createStore(
  Reduxie.OuterReducer(reducers),
  composeWithDevTools(applyMiddleware(thunk, Reduxie.Middleware('dbname', configs)))
);
```

The `config` parameter is optional and specifies a `throttleTime` for caching throttle frequency (ms) and `deleteCount` for cache storage limit. For an application with large store objects we advise smaller storage limits.

Implement the state fetch by adding `Reduxie.GetReduxieState(dbname, dispatch)` to the component where you would like the fetch to originate from (typically your app's landing page container).

Function should be called from React's componentDidMount class method (or useEffect for functional components utilizing hooks):

*ReactComponent.js*
```javascript
//...

const mapDispatchToProps = (dispatch) => ({
  getIDBState: Reduxie.GetReduxieState('dbname', dispatch),
});

const ReactFunctionalComponent = (props) => {
  React.useEffect(props.getIDBState, []);

  return (
  //...Display elements
  )
}
```

### How It Works
Reduxie will cache your state to IndexedDB on every state update by using a Redux middleware function specific to your app.

To retrieve your state use the Reduxie GetReduxieState method parametrized by your Redux dispatch from the connected mapDispatchToProps function. This will return a function to be called from your React app's ComponentDidMount (useEffect) lifecycle methods.

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