Exported functions
the following functions are exported by redux-ruleset
:
- addRule: creates a rule
- removeRule: removed a rule
- dispatchEvent: sends a redux-like action that reaches the rule-middleware
- skipRule: modifies a action to skip a specific rule
- middleware: the middleware that should be added to the redux-store
addRule
import {addRule} from 'redux-ruleset'
type AddRule = (rule:Rule) => Rule
addRule({
id: 'PING_PONG',
target: 'PING',
consequence: () => ({type: 'PONG'})
})
removeRule
import {addRule, removeRule} from 'redux-ruleset'
type RemoveRule = (rule:Rule) => void
const rule = addRule({
id: 'PING_PONG',
target: 'PING',
consequence: () => ({type: 'PONG'})
})
removeRule(rule)
Normally you don't have to remove a rule manually. This should be done by the addUntil saga.
dispatchEvent
with dispatchEvent you can send your own events from anywhere to redux-ruleset. Funfact: the ruleset-middleare is just a wrapper around redux, that uses dispatchEvent to propagate the redux-action to redux-ruleset
import {dispatchEvent, addRule} from 'redux-ruleset'
type DispatchEvent = (action:Action, cb?:(action:Action) => void) => void
const button = document.getElementById('btn')
const click = { type: 'CLICK_BUTTON' }
button.addEventListener('click', () => {
dispatchEvent(click, action => {
console.log('button click')
})
})
addRule({
id: 'AFTER_CLICK',
target: 'CLICK_BUTTON'
consequence: () => console.log('hello from after')
})
addRule({
id: 'BEFORE_CLICK',
target: 'CLICK_BUTTON'
position: 'BEFORE',
consequence: () => console.log('hello from before')
})
button.click()
// hello from before
// button click
// hello from after
dispatchEvent takes a redux-like action (an object with an type key) and a callback fn. This callback is only executed when no rule cancels the event. Rules that have a target of BEFORE
are executed before the callback. Rules that have a target of AFTER
(default behaviour) are executed after the callback. If a rule has an target of INSTEAD
the callback won't be called.
Read more about this in the handle state changes section
skipRule
import {skipRule} from 'redux-ruleset'
type SkipRule = (RuleId | RuleId[] | '*') => void
const action = { type: 'PING' }
// examples
skipRule('PING_PONG', action) // => { type: 'PING', meta: { skipRule: 'PING_PONG' }}
skipRule(['PING_PONG'], action) // => { type: 'PING', meta: { skipRule: ['PING_PONG'] }}
skipRule('*', action) // => { type: 'PING', meta: { skipRule: '*' }}
skipRule extends a given action. When a rules tries to react to a action it first looks if it is listed in the meta.skipRule
property. If so, it won't react to the action. You can read more about this in the skip rule section
middleware
import {applyMiddleware, compose, createStore} from 'redux'
import {middleware as ruleMiddleware} from 'redux-ruleset'
const middlewares = [ruleMiddleware]
const enhancers = []
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middlewares),
...enhancers
)
)
When you create your store you should add the redux-ruleset middleware to your middlewares.