withEffects
Used to enhance a plain component, wrapping it in a WithEffects component which handles side-effects internally. It is a curried higher-order component.
withEffects
is provided by our React, Inferno or Preact packages - refract-*
, refract-inferno-*
, refract-preact-*
.withEffects = (
aperture,
config: { handler?, errorHandler?, Context?, mergeProps?, decorateProps? }
) => BaseComponent => {
return WrappedComponent
}
- 1.
aperture
(function): a function which observes data sources within your app, passes this data through any necessary logic flows, and outputs a stream ofeffect
values in response.Signature:(component, initialProps, initialContext?) => { return effectStream }
.- The
component
is an object which lets you observe your React, Inferno or Preact component: see Observing React - The
initialProps
are all props passed into theWrappedComponent
. - The
initialContext
is the initial context value of the providedContext
(see above, React >= 16.6.0 only) - Within the body of the function, you observe the event source you choose, pipe the events through your stream library of choice, and return a single stream of effects.
- 2.a
config
object optionally containing the following:- 1.
handler
(function): an optional function which causes side-effects in response toeffect
values.Signature:(initialProps, initialContext?) => (effect) => { /* handle effect here */ }
- The
initialProps
are all props passed into theWrappedComponent
. - The
initialContext
is the initial context value of the providedContext
(see below, React >= 16.6.0 only) - The
effect
is each value emitted by youraperture
. - Within the body of the function, you cause any side-effect you wish.
- 2.
errorHandler
(function): an optional function for catching any unexpected errors thrown within youraperture
. Typically used for logging errors.Signature:(initialProps, initialContext?) => (error) => { /* handle error here */ }
- The
initialProps
are all props passed into theWrappedComponent
. - The
initialContext
is the initial context value of the providedContext
(see below, React >= 16.6.0 only) - The
error
is each value emitted by youraperture
. - Within the body of the function, you cause any side-effect you wish.
- 3.
Context
(ReactContext): a React Context object. Its initial value will be passed tohandler
,errorHandler
andaperture
(React 16.6.0 and above only). - 4.
mergeProps
: whether or not props passed withtoProps
orasProps
should be merged together. - 5.
decorateProps
: whether or not props which are functions should be decorated, so their arguments can be observed (default totrue
).
- 3.
BaseComponent
(React component): any react component.
WrappedComponent
(React component): a new component which contains your side-effect logic, and which will render your component as per usual.import { withEffects } from 'refract-rxjs'
const BaseComponent = ({ username, onChange }) => (
<input value={username} onChange={onChange} />
)
const aperture = component => {
return component.observe('username').pipe(
debounce(2000),
map(username => ({
type: 'localstorage',
name: 'username',
value: username
}))
)
}
const handler = initialProps => effect => {
switch (effect.type) {
case 'localstorage':
localstorage.setItem(effect.name, effect.value)
return
}
}
const WrappedComponent = withEffects(aperture, { handler })(BaseComponent)
withEffects
is curried so that you can re-use a boundhandler
(anderrorHandler
) with multiple differentapertures
.
Last modified 4yr ago