Have ideas to improve npm?Join in the discussion! »

    redux-request-generator

    1.0.0-rc.1 • Public • Published

    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

    Install

    npm i redux-request-generator

    DownloadsWeekly Downloads

    1

    Version

    1.0.0-rc.1

    License

    MIT

    Last publish

    Collaborators

    • avatar