Effect
Effect is a container for async function.
It can be safely used in place of the original async function.
The only requirement for function:
- Should have zero or one argument
Arguments
params
(Params): parameters passed to effect
Returns
(Future
)
Example
const getUser = createEffect('get user')
getUser.use(params => {
return fetch(`https://example.com/get-user/${params.id}`)
.then(res => res.json())
})
const users = createStore([]) // <-- Default state
// add reducer for getUser.done event (fires when promise resolved)
.on(getUser.done, (state, {result: user, params}) => [...state, user])
// subscribe to promise resolve
getUser.done.watch(({result, params}) => {
console.log(params) // {id: 1}
console.log(result) // resolved value
})
// subscribe to promise reject (or throw)
getUser.fail.watch(({error, params}) => {
console.error(params) // {id: 1}
console.error(error) // rejected value
})
// you can replace function anytime
getUser.use(() => promiseMock)
// call effect with your params
getUser({id: 1})
const data = await getUser({id: 2}) // handle promise
Effect Methods
Effect Properties
Effect Methods
use(thunk)
Provides a function, which will be called when an effect is triggered.
It will replace the previous function inside (if any).
Arguments
(thunk
): Function, that receives the first argument passed to an effect call
Returns
(Effect
): A container for async function.
Example
const effect = createEffect("effect name")
effect.use((params) => {
console.log("effect called with", params)
return fetch("/some-resource")
})
effect(1) // >> effect called with 1
watch(watcher)
Subscribe to effect calls.
Arguments
(watcher
): A function that receives params
and effect name
Returns
(Subscription
): A function that unsubscribes the watcher
Example
const effect = createEffect("foo")
effect.watch((params, name) => {
console.log(name, "called with", params)
})
effect(20) // > foo called with 20
prepend(fn)
Returns
(Event
): An intention to change state.
Effect Properties
.done
Event triggered when promise from thunk is resolved
Arguments
Event triggered with object of params
and result
:
(params
): An argument passed to the effect call
(result
): A result of the resolved promise
Example
const effect = createEffect()
effect.use((value) => Promise.resolve(value + 1))
effect.done.watch(({ params, result }) => {
console.log("Done with params", params, "and result", result)
})
effect(2) // >> Done with params 2 and result 3
.fail
Event triggered when promise from thunk is rejected or thunk throws.
Arguments
Event triggered with object of params
and error
:
(params
): An argument passed to effect call
(error
): An error catched from the thunk
Example
const effect = createEffect()
effect.use((value) => Promise.reject(value - 1))
effect.fail.watch(({ params, error }) => {
console.log("Fail with params", params, "and error", error)
})
effect(2) // >> Fail with params 2 and error 1