https://github.com/caydenberg/redux-popsicle
Manage HTTP requests in redux actions with simple, testable object configs
https://github.com/caydenberg/redux-popsicle
http json popsicle redux rest
Last synced: 5 months ago
JSON representation
Manage HTTP requests in redux actions with simple, testable object configs
- Host: GitHub
- URL: https://github.com/caydenberg/redux-popsicle
- Owner: CAYdenberg
- Created: 2018-08-26T03:02:44.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-31T02:08:32.000Z (almost 8 years ago)
- Last Synced: 2025-10-10T14:45:04.174Z (8 months ago)
- Topics: http, json, popsicle, redux, rest
- Language: JavaScript
- Size: 11.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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.
## 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})
}
}
```