# redux-suspense

> npm install redux-suspense

Latest version **0.0.5** (published 2018-04-24) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2018-04-24 |
| First published | 2018-04-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Alexey Raspopov |
| Maintainers | alexeyraspopov |
| Keywords | react, redux, suspense |

## Links

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

## 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.0.5 (latest) — 2018-04-24
- 0.0.4 — 2018-04-19
- 0.0.3 — 2018-04-19
- 0.0.2 — 2018-04-19
- 0.0.1 — 2018-04-16

## README

# Redux Suspense

    npm install redux-suspense

## Motivation

This project is an experiment that aims at finding a way to integrate existing
data flow (built with Redux) with upcoming React Suspense feature. The idea
behind proposed implementation is to reduce the amount of imperative logic
required for coupling Redux store to data fetched from the server side.

A components reads data from store in the same synchronous way as before. If
data is not available (not yet fetched) in the rendering phase, an effect is
thrown out of component so React suspend the render till the effect (scheduled
data fetching) is complete. After, React renders the component again with
necessary data available in store.

The important part of the mechanism is that developers do not need to specify
such logic in `componentDidMount()` explicitly as it is needed now. However,
the top-level logic remains the same. Current implementation hides this aspect
from developers so it can be done in the most efficient way and updated with
newer versions of React without forcing developers to refactor existing code.

_Note: this project is an experiment. I encourage you to try, though
carefully consider undiscovered bugs before using in your real projects._

## API

    import { createResourceMapper } from 'redux-suspense';

Resource mapper combines a state selector function and action creator in order
to provide frictionless method to query async data from store.

    import { connectSuspense } from 'redux-suspense';

Suspense connector is a HOC built on top of `connect()` in order to inject the
state tree and dispatch function that is going to be used by a resource mapper.

    import { Consumer } from 'redux-suspense';

The same connector as `connectSuspense()` but done with render prop pattern
instead of higher-order component.

    import { Placeholder } from 'redux-suspense';

A component wrapper that allows to show alternative content if async children
can't render their content in defined time frame.

## Examples

In `examples` folder you can find [Reddit API Example][reddit-example] which is
basically an [original advanced example][reddit-example-original] improved by
`redux-suspense`. In addition, [Basic Example][basic-example] shows the minimal
code implementation with tests.

 [reddit-example]: https://github.com/alexeyraspopov/redux-suspense/tree/master/examples/reddit
 [reddit-example-original]: https://redux.js.org/advanced/example-reddit-api
 [basic-example]: https://github.com/alexeyraspopov/redux-suspense/tree/master/examples/basic

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