Dispatch strikes back
- Change the effect implementation signature as follows: (dispatch, props, payload) - dispatch is now the first argument to the function. - props is the value passed in to the effect constructor, e.g., myEffect(props), and - payload is the original payload of the associated action, e.g., the event object. - Remove passive event support and defer this for a future version. - Other options I'm considering are: - Make all `touch` events passive by default - Specify passive events via the attribute name: `on***Passive` - Go back to { action: MyAction, passive: true }
This commit is contained in:
parent
e17470020b
commit
50d39e6200
|
@ -4,10 +4,10 @@ var fx = function(a) {
|
|||
}
|
||||
}
|
||||
|
||||
export var focus = fx(function(id) {
|
||||
export var focus = fx(function(_, id) {
|
||||
document.getElementById(id).focus()
|
||||
})
|
||||
|
||||
export var blur = fx(function(id) {
|
||||
export var blur = fx(function(_, id) {
|
||||
document.getElementById(id).blur()
|
||||
})
|
||||
|
|
|
@ -7,7 +7,7 @@ var fx = function(a) {
|
|||
var throttledEvent = function(name) {}
|
||||
|
||||
var rawEvent = function(name) {
|
||||
return fx(function(action, dispatch) {
|
||||
return fx(function(dispatch, action) {
|
||||
var listener = function(event) {
|
||||
dispatch(action, event)
|
||||
}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
var fx = function(a) {
|
||||
return function(b) {
|
||||
return [a, b]
|
||||
var timeFx = function(fx) {
|
||||
return function(action, props) {
|
||||
return [fx, { action: action, delay: props.delay }]
|
||||
}
|
||||
}
|
||||
|
||||
export var interval = fx(function(props, dispatch) {
|
||||
export var interval = timeFx(function(dispatch, props) {
|
||||
var id = setInterval(function() {
|
||||
dispatch(props.action, Date.now())
|
||||
}, props.delay)
|
||||
|
@ -13,16 +13,14 @@ export var interval = fx(function(props, dispatch) {
|
|||
}
|
||||
})
|
||||
|
||||
export var timeout = fx(function(props, dispatch) {
|
||||
export var timeout = timeFx(function(dispatch, props) {
|
||||
setTimeout(function() {
|
||||
dispatch(props.action)
|
||||
}, props.delay)
|
||||
})
|
||||
|
||||
// TODO
|
||||
// now
|
||||
// here
|
||||
// retry
|
||||
// debounce
|
||||
// throttle
|
||||
// idleCallback?
|
||||
// export var now
|
||||
// export var retry
|
||||
// export var debounce
|
||||
// export var throttle
|
||||
// export var idleCallback?
|
||||
|
|
26
src/index.js
26
src/index.js
|
@ -78,7 +78,7 @@ var patchSubs = function(oldSubs, newSubs, dispatch) {
|
|||
? [
|
||||
newSub[0],
|
||||
newSub[1],
|
||||
newSub[0](newSub[1], dispatch),
|
||||
newSub[0](dispatch, newSub[1]),
|
||||
oldSub && oldSub[2]()
|
||||
]
|
||||
: oldSub
|
||||
|
@ -101,11 +101,13 @@ var patchProperty = function(node, key, oldValue, newValue, listener, isSvg) {
|
|||
}
|
||||
} else if (key[0] === "o" && key[1] === "n") {
|
||||
if (
|
||||
!((node.actions || (node.actions = {}))[(key = key.slice(2))] = newValue)
|
||||
!((node.actions || (node.actions = {}))[
|
||||
(key = key.slice(2).toLowerCase())
|
||||
] = newValue)
|
||||
) {
|
||||
node.removeEventListener(key, listener)
|
||||
} else if (!oldValue) {
|
||||
node.addEventListener(key, listener, newValue.passive ? newValue : false)
|
||||
node.addEventListener(key, listener)
|
||||
}
|
||||
} else if (!isSvg && key !== "list" && key in node) {
|
||||
node[key] = newValue == null ? "" : newValue
|
||||
|
@ -424,10 +426,7 @@ export var app = function(props, enhance) {
|
|||
var subs = []
|
||||
|
||||
var listener = function(event) {
|
||||
var action = this.actions[event.type]
|
||||
if (action.preventDefault) event.preventDefault()
|
||||
if (action.stopPropagation) event.stopPropagation()
|
||||
dispatch(action.action || action, event)
|
||||
dispatch(this.actions[event.type], event)
|
||||
}
|
||||
|
||||
var setState = function(newState) {
|
||||
|
@ -438,19 +437,20 @@ export var app = function(props, enhance) {
|
|||
}
|
||||
|
||||
var dispatch = (enhance ||
|
||||
function(a) {
|
||||
return a
|
||||
})(function(action, props) {
|
||||
function(any) {
|
||||
return any
|
||||
})(function(action, props, obj) {
|
||||
return typeof action === "function"
|
||||
? dispatch(action(state, props))
|
||||
? dispatch(action(state, props), obj || props)
|
||||
: isArray(action)
|
||||
? typeof action[0] === "function"
|
||||
? dispatch(
|
||||
action[0],
|
||||
typeof action[1] === "function" ? action[1](props) : action[1]
|
||||
typeof (action = action[1]) === "function" ? action(props) : action,
|
||||
props
|
||||
)
|
||||
: (batch(action.slice(1)).map(function(fx) {
|
||||
fx && fx[0](fx[1], dispatch)
|
||||
fx && fx[0](dispatch, fx[1], props)
|
||||
}, setState(action[0])),
|
||||
state)
|
||||
: setState(action)
|
||||
|
|
Loading…
Reference in New Issue