redux-on

Store enhancer for redux which support accurately subscribe.

Install

npm i --save redux-on

Usage

import { createStore, applyMiddleware, compose } from 'redux'
import accuratelySubscribe from 'redux-on'
 
const enhancer = compose(
  applyMiddleware(...middleware),
  accuratelySubscribe()
)
const store = createStore(reducer, initialState, enhancer)
 
// example
const off = store.on((prevState, state) => {
  return prevState.user !== state.user
}, (prevState, state) => {
  alert(`Hi, ${state.user.name}, welcome!`)
})

Api

on([type], [predicate], handler, [once])

Adds a change handler. It will be called any time an action with specified type dispatched or successful predication.

Arguments

1. type (String): The type of action.
2. predicate (Function): The logic of predication. It will be called with two parameters: prevState, state. Need to returns a boolean value.
3. handler (Function): The change handler. It will be called with two parameters: prevState, state.
4. once (Boolean): Whether to handle change only once. Default false.

Returns

(Function): A function that drop the change handler.

Examples

// listen customer change by action type.
const off = store.on('CUSTOMER', (prevState, state) => {
  alert(`Hi, ${state.customer.name}! welcome to the bar.`)
})
// listen customer change by predication.
const off1 = store.on(
  (prevState, state) => prevState.customer !== state.customer,
  (prevState, state) => alert(`Hi, ${state.customer.name}! welcome to the bar.`)
)
// listen customer change by action type and predication.
const off2 = store.on(
  'CUSTOMER',
  (prevState, state) => state.customer.age < 18,
  (prevState, state) => alert(`Hey, boy! Can't drink!`)
)
// cancel listen
off()

once([type], [predicate], handler)

Adds a change handler. It will be called only once an action with specified type dispatched or successful predication.

Arguments

1. type (String): The type of action.
2. predicate (Function): The logic of predication. It will be called with two parameters: prevState, state. Need to returns a boolean value.
3. handler (Function): The change handler. It will be called with two parameters: prevState, state.

Returns

(Function): A function that drop the change handler.

Examples

store.once('CUSTOMER', (prevState, state) => {
  alert(`Hey, you are the first customer, free drinking tonight!`)
})
// or
store.once(
  (prevState, state) => !prevState.customer && state.customer,
  (prevState, state) => alert(`Hey, you are the first customer, free drinking tonight!`)
)

License

MIT