https://github.com/naugtur/redux-request-generator
no-boilerplate http requests from redux apps
https://github.com/naugtur/redux-request-generator
Last synced: 6 months ago
JSON representation
no-boilerplate http requests from redux apps
- Host: GitHub
- URL: https://github.com/naugtur/redux-request-generator
- Owner: naugtur
- Created: 2016-01-18T19:00:02.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-01-18T20:36:49.000Z (over 9 years ago)
- Last Synced: 2024-04-14T05:58:08.654Z (over 1 year ago)
- Language: JavaScript
- Size: 14.6 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# redux-request-generator
*This is not yet released. API or the way it integrates into redux might change. Feedback welcome.*
One function that creates actions and reducers for your http requests.
**How is it different?**
* not a middleware
* has tests
**Browser support**
By default `fetch` is used, so it has to be there (or shimmed)
If you're considering shimming fetch, use `require('redux-request-generator/xhr')` instead. It uses xhr for making http requests.
No support for IE8 or IE9, but you should be able to get it to work.
## Usage
```js
const defineRequests = require('redux-request-generator')
const {actions, reducers} = defineRequests(definitions, defaults)
//use in your app
combineReducers({
...reducers
});
```
`definitions` is a map from state keys to request definitions:
```js
definition:= {
requestGenerator: (args) => (url or Request object),
condition: (state) => (boolean), //optional
mapper: (data) => (data) //optional
}
```
`redux-thunk` middleware is required for actions creator to work
## Example
1. Define requests available to your app.
```js
const {actions, reducers} = defineRequests({
books: {
requestGenerator: (author) => (`/api/books/by/${author}`),
mapper: (data, author) => ({[author]: data.results})
}
}, defaults)
```
2. Add thunk middleware and combine defined reducers with your other reducers.
```js
const createStoreWithMiddleware = applyMiddleware([thunk])(createStore)
const reducer = combineReducers({
myField: myCustomReducer,
...reducers
})
const store = createStoreWithMiddleware(reducer)
```
3. To fetch data dispatch just one action and both your helper functions will be given the arguments passed to the action.
```js
store.dispatch(actions.books("JRRTolkien"))
```
4. Use the key (`books`) in a component. Show loading indicator while `isFetching` is true. `state.books` will contain:
- `isFetching` - set to true while the request is waiting for response
- `error` - error object if there was an error fetching data `{statusCode, messages}`
- `data` - response or whatever `mapper` returned after the response came in. *Must be an object*