Redux Capture

Captures all the actions dispatched by sync or async thunk actions.

Installation

npm install redux-capture

Motivation

Suppose we have an async thunk action that fetches data and dispatches it as FSA compliant action:

const WILL_FETCH_DATA = 'WILL_FETCH_DATA'
const DID_FETCH_DATA = 'DID_FETCH_DATA'

function fetchData (path) {
  return async dispatch => {
    // Notify that we are fetching data
    dispatch({ type: WILL_FETCH_DATA })
    try {
      const response = await fetch(new URL(path, 'https://example.com'))
      if (!response.ok) {
        throw new Error(`Failed to fetch with status ${response.status}`)
      }
      // Dispatch the data as action payload.
      dispatch({
        type: DID_FETCH_DATA,
        payload: await response.json()
      })
    } catch (error) {
      // Dispatch an error action if it failed to do so.
      dispatch({
        type: DID_FETCH_DATA,
        payload: error,
        error: true
      })
    }
  }
}

And we want isFetching state as follows:

import { handleActions } from 'redux-actions'

const defaultState = {
  counter: 0,
  isFetching: false
}

const reducer = handleActions({
  [WILL_FETCH_DATA]: (state, action) => {
    const counter = state.counter + 1
    return {
      ...state,
      counter,
      isFetching: counter > 0
    }
  },

  [DID_FETCH_DATA]: (state, action) => {
    const counter = state.counter - 1
    return {
      ...state,
      counter,
      isFetching: counter > 0
    }
  }
}, defaultState)

This will work as it’s supposed to. The counter will increment as fetchData are dispatched and decrement as they finish, changing isFetching to correct values.

In many cases, we want to make other actions that rely on such actions like fetchData, so to reuse its state transitions. Redux Capture allows you to capture actions dispatched by thunk actions.

import { capture } from 'redux-capture'

const FETCH_USERS = 'FETCH_USERS'
const FETCH_GUESTS = 'FETCH_GUESTS'

function fetchUsers () {
  return async dispatch => {
    try {
      // This will be payload of the last action dispatched by fetchData, or
      // throw error if it’s an error action.
      const data = await capture(fetchData('/users'), dispatch)
      dispatch({
        type: FETCH_USERS,
        payload: data.filter(user => !user.isDeleted)
      })
    } catch (error) {
      dispatch({
        type: FETCH_USERS,
        payload: error,
        error: true
      })
    }
  }
}

function fetchGuests () {
  return async dispatch => {
    try {
      // Same discussion above. This capture returns users.
      const users = await capture(fetchUsers(), dispatch)
      dispatch({
        type: FETCH_GUESTS,
        payload: users.filter(user => user.isGuest)
      })
    } catch (error) {
      dispatch({
        type: FETCH_GUESTS,
        payload: error,
        error: true
      })
    }
  }
}

Or capture the last action itself or all the actions when FSA is not your preference.

import { captureLastAction, captureActions } from 'redux-capture'

const lastAction = await captureLastAction(fetchUsers(), dispatch)
// { type: FETCH_USERS, ... }

const actions = await captureActions(fetchUsers(), dispatch)
// [
//   { type: WILL_FETCH_DATA, ... },
//   { type: DID_FETCH_DATA, ... },
//   { type: FETCH_USERS, ... }
// ]

API Reference

capture(action, dispatch [, getState])

• action : object | function
• dispatch : function
• getState : (Optional) function

When action is an action object, this returns its payload. Throws payload if its error is true.

When action is a sync thunk action, this returns its payload of the last action dispatched by it. Throws payload if error of the last action is true.

When action is an async thunk action, this returns Promise that resolves payload of the last action, or rejects with payload if error of the last action is true.

captureLastAction(action, dispatch [, getState])

• action : object | function
• dispatch : function
• getState : (Optional) function

Returns the last action dispatched by action, or Promise that resolves it.

captureActions(action, dispatch [, getState])

• action : object | function
• dispatch : function
• getState : (Optional) function

Returns an array of all the actions dispatched by action, or Promise that resolves it.

License

MIT