no-boilerplate http requests from redux apps
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
src
test
.babelrc
.gitignore
.npmignore
README.md
package.json

README.md

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

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:

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.
const {actions, reducers} = defineRequests({
    books: {
        requestGenerator: (author) => (`/api/books/by/${author}`),
        mapper: (data, author) => ({[author]: data.results})
    }
}, defaults)
  1. Add thunk middleware and combine defined reducers with your other reducers.
const createStoreWithMiddleware = applyMiddleware([thunk])(createStore)
const reducer = combineReducers({
    myField: myCustomReducer,
    ...reducers
})
const store = createStoreWithMiddleware(reducer)
  1. To fetch data dispatch just one action and both your helper functions will be given the arguments passed to the action.
store.dispatch(actions.books("JRRTolkien"))
  1. 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