# redux-popsicle

> Manage HTTP requests in redux actions with simple, testable object configs

Latest version **0.2.1** (published 2018-09-25) · MIT license · 0 weekly downloads

## Install

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

## 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.2.1 |
| Published | 2018-09-25 |
| First published | 2018-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 150.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | @CAYdenberg |
| Maintainers | caseyy |
| Keywords | redux, popsicle, http, REST, json, state, management |

## Links

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

## Dependencies (1)

- [popsicle](https://npm.io/package/popsicle.md) ^10.0.1

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.2.1 (latest) — 2018-09-25
- 0.2.0 — 2018-09-25
- 0.1.3 — 2018-08-31
- 0.1.2 — 2018-08-31
- 0.1.1 — 2018-08-31
- 0.1.0 — 2018-08-31

## README

Redux middleware for making HTTP requests via the [Popsicle](https://www.npmjs.com/package/popsicle) library. The emphasis is on keeping actions creators as pure functions that return simple objects (as opposed to promises, functions, thunks, iterators) to simplify unit testing on your end.

## Installation

```bash
npm i --save redux-popsicle
```

```js
import reduxPopsicle from 'redux-popsicle'

// when you create your store
const store = createStore(reducer, initialState, applyMiddleware([reduxPopsicle, ...otherMiddleware]))
```

## How it works

Any action that contains a `popsicle` property will be handled by the middleware. The contents of that property (usually an object) will be passed to Popsicle to create the request. For example, if your action creator is:

```js
const weatherRequest = location => {
    return {
        type: 'WEATHER_REQUEST',
        popsicle: {
            method: 'GET',
            url: `https://api.weatherservice.com/${location}`
        }
    }
}
```

See the [Popsicle README](https://www.npmjs.com/package/popsicle) for the full lowdown on the popsicle API.

Note that the action is still passed to the reducer. You can use that to indicate within the store that the request has been made.

Alternatively, the `popsicle` property may be a function. This function receives the full
store state, *after processing the current action*, as an argument, and should return a
object similar to the example above.

## Responses

In the example above, redux-popsicle will dispatch a default action once the response arrives (`{type: '@@redux-popsicle/RESPONSE'}`). In most cases, however, you will want to do something with the data. You can include a `response` property in the action, which is itself an action creator that describes what to do with the response body:

```js
const weatherRequest = location => {
    return {
        type: 'WEATHER_REQUEST',
        popsicle: {
            method: 'GET',
            url: `https://api.weatherservice.com/${location}`
        },
        response: body => ({type: 'WEATHER_RESPONSE', data: body.data})
    }
}
```

where `body` represents the (JSON-parsed) request body, assuming the request is successful.

Note that `response` can also contain a simple action object, instead of an action creator.

## Errors

Responses with 4xx and 5xx status codes will not trigger the `response` action creator. In the example above, they would dispatch a default error action (`{type: '@@redux-popsicle/ERROR'}`). You can include an `error` property that can be an action:

```js
const weatherRequest = location => {
    return {
        type: 'WEATHER_REQUEST',
        popsicle: {
            method: 'GET',
            url: `https://api.weatherservice.com/${location}`
        },
        response: body => ({type: 'WEATHER_RESPONSE', data: body.data}),
        error: {type: 'WEATHER_ERROR'}
    }
}
```

or an action creator:

```js
const weatherRequest = location => {
    return {
        type: 'WEATHER_REQUEST',
        popsicle: {
            method: 'GET',
            url: `https://api.weatherservice.com/${location}`
        },
        response: body => ({type: 'WEATHER_RESPONSE', data: body.data}),
        error: (statusCode, body) => ({type: 'WEATHER_ERROR', statusCode, body})
    }
}
```

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