# redux-effects-fetch

> Declarative data-fetching for redux

Latest version **0.5.5** (published 2016-05-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-effects-fetch
pnpm add redux-effects-fetch
yarn add redux-effects-fetch
bun add redux-effects-fetch
```

## 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.5.5 |
| Published | 2016-05-19 |
| First published | 2015-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 86 |
| Author | ashaffer |
| Maintainers | ashaffer88 |
| Keywords | redux, fetch |

## Links

- npm: https://www.npmjs.com/package/redux-effects-fetch
- Repository: https://github.com/redux-effects/redux-effects-fetch
- Issues: https://github.com/redux-effects/redux-effects-fetch/issues
- npm.io page: https://npm.io/package/redux-effects-fetch

## Dependencies (2)

- [es6-promise](https://npm.io/package/es6-promise.md) ^3.0.2
- [isomorphic-fetch](https://npm.io/package/isomorphic-fetch.md) ^2.1.1

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 0.5.5 (latest) — 2016-05-19
- 0.5.4 — 2016-05-13
- 0.5.3 — 2016-05-07
- 0.5.2 — 2016-05-07
- 0.5.1 — 2016-05-07
- 0.5.0 — 2016-05-07
- 0.4.6 — 2016-04-04
- 0.4.5 — 2016-02-17
- 0.4.4 — 2016-01-10
- 0.4.3 — 2016-01-05
- 0.4.2 — 2015-12-24
- 0.4.1 — 2015-11-13
- 0.4.0 — 2015-11-13
- 0.3.3 — 2015-10-14
- 0.3.2 — 2015-10-07
- … 11 more at https://npm.io/package/redux-effects-fetch/versions

## README

# redux-effects-fetch

Declarative data fetching for [redux](https://github.com/rackt/redux). Build on top of [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) so it works everywhere.

## Installation

`npm install redux-effects-fetch`

## Usage

This package is designed to be used in conjunction with [redux-effects](https://github.com/redux-effects/redux-effects).  Install it like this:

```javascript
import effects from 'redux-effects'
import fetch, { fetchEncodeJSON } from 'redux-effects-fetch'

// fetchEncodeJSON is optional
applyMiddleware(effects, fetch, fetchEncodeJSON)(createStore)
```

This will enable your middleware to support fetch actions.

## Actions

You can create your own action creators for this package, or you can use the one that comes bundled with it.  The action format is simple:

```javascript
{
  type: 'EFFECT_FETCH',
  payload: {
    url,
    params
  }
}
```

Where `url` and `params` are what you would pass as the first and second arguments to the native `fetch` API.  If you want your action creators to support some async flow control, you should use [redux-effects](https://github.com/redux-effects/redux-effects)' `bind` function.  If you do, your fetch action will return you an object with the following properties:

  * `url` - The url of the endpoint you requested (as returned by the request)
  * `status` - The numerical status code of the response (e.g. 200)
  * `statusText` - The text version of the status (e.g. 'OK')
  * `headers` - A [Headers object](https://developer.mozilla.org/en-US/docs/Web/API/Headers)
  * `value` - The deserialized value of the response.  This may be an object or string, depending on the type of response (json or text).

## Examples

### Creating a user

```javascript
import {bind} from 'redux-effects'
import {fetch} from 'redux-effects-fetch'
import {createAction} from 'redux-actions'

function signupUser (user) {
  return bind(fetch(api + '/user', {
    method: 'POST',
    body: user
  }), ({value}) => userDidLogin(value), ({value}) => setError(value))
}

const userDidLogin = createAction('USER_DID_LOGIN')
const setError = createAction('SET_ERROR')
```

This works exactly as if you were working with the native `fetch` API, except your request is actually being executed by middleware.

### Handling loading states

For this I recommend the use of [redux-multi](https://github.com/ashaffer/redux-multi), which allows you to dispatch more than one action at a time.

```javascript
import {bind} from 'redux-effects'
import {fetch} from 'redux-effects-fetch'
import {createAction} from 'redux-actions'

function signupUser (user) {
  return [
    signupIsLoading(),
    bind(fetch(api + '/user', {
      method: 'POST',
      body: user
    }), ({value}) => userDidLogin(value), ({value}) => setError(value))
  ]
}

const signupIsLoading = createAction('SIGNUP_IS_LOADING')
const userDidLogin = createAction('USER_DID_LOGIN')
const setError = createAction('SET_ERROR')
```

## Local development

If you want to develope your frontend application without any REST server running,
you can use [redux-effects-fetch-fixture](https://github.com/team-boris/redux-effects-fetch-fixture) to define
fixtures for your `fetch` requests.

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