redux-effects-fetch

DEPRECATED: official project is here 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. Use it like this:

import effects from 'redux-effects'
import fetch from 'redux-effects-fetch'

applyMiddleware(effects(fetch))(createStore)

Action creators

You can create your own action creators for this package, or you can use declarative-fetch. The action format is simple:

{type: 'EFFECT', payload: {type: 'FETCH', 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 wrap your action in a declarative-promise (the declarative-fetch package does this for you).

Examples

Creating a user

import fetch from 'declarative-fetch'
import {createAction} from 'redux-actions'

function signupUser (user) {
  return fetch(api + '/user', {
    method: 'POST',
    body: user
  }).then(userDidLogin, setError)
}

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 fetch from 'declarative-fetch'
import {createAction} from 'redux-actions'

function signupUser (user) {
  return [
    signupIsLoading(),
    fetch(api + '/user', {
      method: 'POST',
      body: user
    }).then(userDidLogin, setError)
  ]
}

const signupIsLoading = createAction('SIGNUP_IS_LOADING')
const userDidLogin = createAction('USER_DID_LOGIN')
const setError = createAction('SET_ERROR')