Skip to content

Latest commit

 

History

History
121 lines (86 loc) · 3.33 KB

README.md

File metadata and controls

121 lines (86 loc) · 3.33 KB

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.