Nashville Plays Music

    redux-effects-fetch

    0.5.5 • Public • Published

    redux-effects-fetch

    Declarative data fetching for redux

    Installation

    npm install redux-effects-fetch

    Usage

    This package is designed to be used in conjunction with redux-effects. Install it like this:

    import effects from 'redux-effects'
    import fetch, { fetchEncodeJSON } from 'redux-effects-fetch'
     
    // fetchEncodeJSON is optional
    applyMiddleware(effects, fetch, fetchEncodeJSON)(createStore)

    This will enable your middleware to support fetch actions.

    Actions

    You can create your own action creators for this package, or you can use the one that comes bundled with it. The action format is simple:

    {
      type: 'EFFECT_FETCH',
      payload: {
        url,
        params
      }
    }

    Where url and params are what you would pass as the first and second arguments to the native fetch API. If you want your action creators to support some async flow control, you should use redux-effects' bind function. If you do, your fetch action will return you an object with the following properties:

    • url - The url of the endpoint you requested (as returned by the request)
    • status - The numerical status code of the response (e.g. 200)
    • statusText - The text version of the status (e.g. 'OK')
    • headers - A Headers object
    • value - The deserialized value of the response. This may be an object or string, depending on the type of response (json or text).

    Examples

    Creating a user

    import {bind} from 'redux-effects'
    import {fetch} from 'redux-effects-fetch'
    import {createAction} from 'redux-actions'
     
    function signupUser (user) {
      return bind(fetch(api + '/user', {
        method: 'POST',
        body: user
      }), ({value}) => userDidLogin(value), ({value}) => setError(value))
    }
     
    const userDidLogin = createAction('USER_DID_LOGIN')
    const setError = createAction('SET_ERROR')

    This works exactly as if you were working with the native fetch API, except your request is actually being executed by middleware.

    Handling loading states

    For this I recommend the use of redux-multi, which allows you to dispatch more than one action at a time.

    import {bind} from 'redux-effects'
    import {fetch} from 'redux-effects-fetch'
    import {createAction} from 'redux-actions'
     
    function signupUser (user) {
      return [
        signupIsLoading(),
        bind(fetch(api + '/user', {
          method: 'POST',
          body: user
        }), ({value}) => userDidLogin(value), ({value}) => setError(value))
      ]
    }
     
    const signupIsLoading = createAction('SIGNUP_IS_LOADING')
    const userDidLogin = createAction('USER_DID_LOGIN')
    const setError = createAction('SET_ERROR')

    Local development

    If you want to develope your frontend application without any REST server running, you can use redux-effects-fetch-fixture to define fixtures for your fetch requests.

    Keywords

    Install

    npm i redux-effects-fetch

    DownloadsWeekly Downloads

    57

    Version

    0.5.5

    License

    MIT

    Last publish

    Collaborators

    • ashaffer88