redux-active

Redux middleware & reducer to easily manage your users active/idle state

Tiny footprint: ~0.5 kB

Install

This has a peer dependency of redux, which will have to be installed as well.

npm install --save redux-active

UMD

redux-active is also published as an UMD build. You can use it via the unpkg CDN:

https://unpkg.com/redux-active@latest/dist/umd/redux-active.min.js

Setup

First, you must add the middleware to your redux store.

// store.js
 
import { createStore, applyMiddleware } from 'redux'
import { createActiveMiddleware } from 'redux-active'
import rootReducer from './rootReducer'
 
const activeMiddleware = createActiveMiddleware()
 
const store = createStore(
  rootReducer,
  applyMiddleware(activeMiddleware)
)

Second, add the reducer to the root of your reducer tree.

// rootReducer.js
 
import { combineReducers } from 'redux'
import { activeReducer } from 'redux-active'
 
export default combineReducers({
  isActive: activeReducer,
})

Usage

With this basic setup, redux-active adds event listeners to the window object to detect your users activity. Based on the events being triggered, the middleware dispatches IS_IDLE and IS_ACTIVE actions, based on which the reducer manages a isActive boolean in your state indicating if the user is active or not.

Example usecase

Imagine a dashboarding application where dashboards viewed on a large screen can be set to a fullscreen mode. Using the isActive flag provided by this module, various controls such as buttons or links could be hidden when the user is inactive whilst in fullscreen mode.

Options

createActiveMiddleware accepts options to fine tune redux-active to your needs:

import { throttle } from 'lodash'
 
const activeMiddleware = createActiveMiddleware({
  idleTimeout: 10000,
  stateSelector: state => state.user.isActive,
  throttle,
})

Available options are:

• eventTarget
  The target HTMLElement on which the middleware is listening for events.
  Default: window
  
  
• eventThrottleTimeout
  The internal event handler is throttled by this amount of miliseconds.
  Default: 250
  
  
• eventTypes
  The events that are listened for on the eventTarget.
  Default: ['click', 'focus', 'keydown', 'mousemove', 'resize', 'scroll', 'touchmove', 'wheel']
  
  
• idleCheckInterval
  Interval length for repeated user idle checks in miliseconds.
  Default: 1000
  
  
• idleTimeout
  Amount of miliseconds before a user is considered idle.
  Default: 60000
  
  
• stateSelector
  Method that returns the isActive boolean when given the state.
  Default: state => state.isActive
  
  
• throttle
  Method used to throttle event handlers. When none is given, dynamically requires lodash's throttle implementation.
  Default: require('lodash/throttle')

Setup troubleshooting

Note that if you are using additional middleware, custom enhancers or initialize the store with an initial state, the createStore call might look more like this:

import { createStore, compose, applyMiddleware } from 'redux'
import { createActiveMiddleware } from 'redux-active'
import rootReducer from './rootReducer'
 
const activeMiddleware = createActiveMiddleware()
 
const store = createStore(
  rootReducer,
  initialState,
  compose(
    otherEnhancer,
    applyMiddleware(activeMiddleware, otherMiddleware)
  )
)

If you can't get this to work, be sure to consult the redux documentation and understand the difference between middleware and enhancers as well as the API of the createStore, compose and applyMiddleware methods.