redux-rules
v0.0.7
Published
Rules API for Redux.
Downloads
18
Readme
Rules API for Redux
Make your code more easy to reason about with a more natural language for your logic, using rules fired by actions and reacting to a given set of facts.
Based on the forward-chaining rules in Clojure called Clara and a discussion from an issue of Choko core.
Where Redux gets in?
[ACTION] => ([RULES] -> [CONDITIONS] -> [REACTIONS]) => [STATE]
Obs.: Reactions are dispatched actions / side-effects.
Redux gives us the tools to build functional rules systems using it's middleware API. So basically each rule behaves like a Redux's middleware.
Vanilla Redux:
import { createStore, applyMiddleware} from 'redux'
import { flashMessage, FLASH_MESSAGE } from 'app/modules/messages/actions'
const LOGIN_SUCCESS = 'user/login/SUCCESS'
const welcomeAuthUserMiddleware = store => next => action => {
switch (action.type) {
case LOGIN_SUCCESS:
if (action.payload.user.roles.some(role => role === 'authenticated')) {
const { name, lastLogin } = action.payload.user
if (!!lastLogin) {
store.dispatch(flashMessage('Good to see you ' + name + '!'))
}
}
break;
}
return next(action)
}
const reducer = (state, action) => {
if (action.type === LOGIN_SUCCESS) {
return { ...state, user: action.payload.user }
}
if (action.type === FLASH_MESSAGE) {
return { ...state, message: action.payload }
}
}
const store = createStore(reducer, applyMiddleware(welcomeAuthUserMiddleware))
store.dispatch({
type: LOGIN_SUCCESS,
payload: { user: { name: 'Manolo', roles: ['authenticated'] } }
})
console.log(getState().message) // Good to see you Manolo!
Using Redux Rules:
import { createStore, applyMiddleware } from 'redux'
import combineRules, { every } from 'redux-rules'
import { flashMessage, FLASH_MESSAGE } from 'app/modules/messages/actions'
const LOGIN_SUCCESS = 'user/login/SUCCESS'
const isAuthUser = ({ action }) => action.payload
.user.roles.some(role => role === 'authenticated')
const isComingBackUser = ({ action }) => !!action.payload.user.lastLogin
const welcomeAuthUserMessageRule = {
type: 'messages/user/login/SUCCESS',
actionTypes: [LOGIN_SUCCESS],
condition: every([
isAuthUser, isComingBackUser
]),
reaction: store => next => action => {
const { name } = action.payload.user
store.dispatch(flashMessage('Good to see you ' + name + '!'))
return next(action)
}
}
const rulesMiddleware = combineRules({
rules: [welcomeAuthUserMessageRule]
})
const reducer = (state, action) => {
if (action.type === LOGIN_SUCCESS) {
return { ...state, user: action.payload.user }
}
if (action.type === FLASH_MESSAGE) {
return { ...state, message: action.payload }
}
}
const store = createStore(reducer, applyMiddleware(rulesMiddleware))
store.dispatch({
type: LOGIN_SUCCESS,
payload: { user: { name: 'Manolo', roles: ['authenticated'] } }
})
console.log(getState().message) // Good to see you Manolo!
Usage:
- Tests.
- Real World.
- Docs coming soon...