JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q25413F
  • License MIT

Side effect middleware for Redux.

Package Exports

  • redux-side-effect

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (redux-side-effect) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Redux Side Effect

Side Effect middleware for Redux. Lets you specify side effects in your reducing function that dispatch new actions.

npm install --save redux-side-effect

Usage

function reduce(state, action){
  switch (action.type){
    case "newState":
      function analytics(){ _gaq.push(['_trackEvent', 'Event', 'Detail']) }
      return sideEffect(action.newState, analytics)

    case "ApiCall":
      return sideEffect(
          Object.assign({}, state, {saving: true})
        , function(dispatch){
            doApiCall().then(function(){ dispatch({type: "Done"}) })
          }
        )

    case "Done":
  }
}

Motivation

The existing redux-thunk middleware does not allow for returning both state and effects at the same time. This leads users to create artificial state events or try even more complex solutions for their effects.

The goal of this middleware is to maintain the simplicty and light-weight API of Redux when dealing with asynchronous actions.

This library attempts to directly copy how Effects are handled in Elm.

code

function sideEffect(state: any, ...effects) {
  if (!state.meta) { state.meta = { sideEffects: effects } }
  return state
}

function sideEffectMiddleware({ dispatch, getState }) {
  return next => action => {
    var result = next(action);
    var state = getState()
    var sideEffects = state && state.meta && state.meta.sideEffects
    if (sideEffects) {
      sideEffects.forEach((effect) => { effect(dispatch, getState) })
    }
    return result
  }
}

Note that by default setTimeout is not called for you. A function sideEffectTimeout is available which takes a time as a second parameter and it wraps all side effects in setTimeout.

dev tools replay

It should be easy enough to figure out how to enhance this to allow side effects to not be generated when replayed (but the events they previously dispatched would still show up).

License

MIT