bs-effector-react
Advanced tools
Changelog
effector 20.0.0
merge
for merging eventsimport {createEvent, merge} from 'effector'
const foo = createEvent()
const bar = createEvent()
const baz = merge([foo, bar])
baz.watch(v => console.log('merged event triggered: ', v))
foo(1)
// => merged event triggered: 1
bar(2)
// => merged event triggered: 2
split
for pattern-matching over eventsimport {createEvent, split} from 'effector'
const message = createEvent()
const messageByAuthor = split(message, {
bob: ({user}) => user === 'bob',
alice: ({user}) => user === 'alice',
})
messageByAuthor.bob.watch(({text}) => {
console.log('[bob]: ', text)
})
messageByAuthor.alice.watch(({text}) => {
console.log('[alice]: ', text)
})
message({user: 'bob', text: 'Hello'})
// => [bob]: Hello
message({user: 'alice', text: 'Hi bob'})
// => [alice]: Hi bob
/* default case, triggered if no one condition met */
const {__: guest} = messageByAuthor
guest.watch(({text}) => {
console.log('[guest]: ', text)
})
message({user: 'unregistered', text: 'hi'})
// => [guest]: hi
clearNode
to automatically dispose all related intermediate stepsimport {createEvent, clearNode} from 'effector'
const source = createEvent()
const target = source.map(x => {
console.log('intermediate step')
return x
})
target.watch(x => console.log('target watcher'))
source()
// => intermediate step
// => target watcher
clearNode(target)
source() // ~ no reaction ~
Fix promise warning for effects
Add effect.finally
import {createEffect} from 'effector'
const fetchApiFx = createEffect({
handler: n =>
new Promise(resolve => {
setTimeout(resolve, n, `${n} ms`)
}),
})
fetchApiFx.finally.watch(response => {
console.log(response)
})
await fetchApiFx(10)
// => {status: 'done', result: '10 ms', params: 10}
// or
// => {status: 'fail', error: Error, params: 10}
event.filterMap
as new alias for event.filter(fn)
extract
, withProps
, is.*
re-exportsChangelog
effector, effector-react, effector-vue 19.0.0
To indicate the stability of the project, we adopting semantic versioning and happy to announce version 19.0.0 for all packages. And to make the transition easier, that release contains no breaking changes; simple replacement of "^0.18.*" to "^19.0.0" is safe for sure ☄️
Changelog
0.18.3-0.18.4
import {version} from 'effector'
console.log(version)
Add effect handler to domain 4c6ae8
Add Unit<T>
as common interface implemented by Event
, Effect
and Store
Add isStore
, isEvent
, isEffect
and isUnit
validators
import {createStore, createEvent, isStore, isEvent, isUnit} from 'effector'
const event = createEvent('some event')
const $store = createStore('value')
isStore($store) // => true
isEvent($store) // => false
isUnit($store) // => true
isStore(event) // => false
isEvent(event) // => true
isUnit(event) // => true
isStore(null) // => false
isEvent(null) // => false
isUnit(null) // => false
createStore
with configimport {createStore} from 'effector'
const $store = createStore('value', {
name: 'value store',
})
Changelog
0.18.2
Fix webpack usage issue. To prevent this in a future, webpack integration test was added.
Improve typescript typings for createApi
. This code example became type checked
import {createStore, createApi} from 'effector'
const $text = createStore('')
const {addMessage, cut} = createApi($text, {
addMessage: (text, message) => text + `\n` + message
cut: (text, {fromIndex, size}) => text.slice(fromIndex, fromIndex + size),
})
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/effector@0.18.2/effector.umd.js"></script>
</head>
<body>
<script>
const header = document.createElement('h1')
document.body.appendChild(header)
const $text = effector.createStore('hello')
$text.watch(str => (header.innerHTML = str))
</script>
</body>
</html>
Changelog
0.18.1
forward
: common function for forwarding updates and eventsimport {forward} from 'effector'
const unsubscribe = forward({
from: Event | Store,
to: Event | Store | Effect,
})
store.on
import {createStore} from 'effector'
const $name = createStore('name')
const $counter = createStore(0).on(name, (count, name) => count++)
{handler: Function}
as second argument to createEffect
import {createEffect} from 'effector'
const callApiFx = createEffect('call api', {
async handler(url) {
const res = await fetch(url)
return res
},
})
effect.use
return the same effect instead of void (ability to chain method calls)import {createEffect} from 'effector'
const callApiFx = createEffect('call api').use(url => fetch(url))
Changelog
0.18.0
store.defaultState
propertycreateComponent
withProps
static function