effector-react - npm Package Versions

effector 21.0.3, effector-react 21.0.4, effector-vue 21.0.3

• Improve native es modules support, add conditional exports declarations

effector 21.0.0

• Add object form of split for pattern-matching without additional forwards

split in documentation

import {split, createEffect, createEvent} from 'effector'

const messageReceived = createEvent()
const showTextPopup = createEvent()
const playAudio = createEvent()
const reportUnknownMessageTypeFx = createEffect({
  handler({type}) {
    console.log('unknown message:', type)
  },
})

split({
  source: messageReceived,
  match: {
    text: msg => msg.type === 'text',
    audio: msg => msg.type === 'audio',
  },
  cases: {
    text: showTextPopup,
    audio: playAudio,
    __: reportUnknownMessageTypeFx,
  },
})

showTextPopup.watch(({value}) => {
  console.log('new message:', value)
})

messageReceived({
  type: 'text',
  value: 'Hello',
})
// => new message: Hello
messageReceived({
  type: 'image',
  imageUrl: '...',
})
// => unknown message: image

Try it

You can match directly to store api as well:

import {split, createStore, createEvent, createApi} from 'effector'

const messageReceived = createEvent()
const $textContent = createStore([])

split({
  source: messageReceived,
  match: {
    text: msg => msg.type === 'text',
    audio: msg => msg.type === 'audio',
  },
  cases: createApi($textContent, {
    text: (list, {value}) => [...list, value],
    audio: (list, {duration}) => [...list, `audio ${duration} ms`],
    __: list => [...list, 'unknown message'],
  }),
})

$textContent.watch(messages => {
  console.log(messages)
})

messageReceived({
  type: 'text',
  value: 'Hello',
})
// => ['Hello']
messageReceived({
  type: 'image',
  imageUrl: '...',
})
// => ['Hello', 'unknown message']
messageReceived({
  type: 'audio',
  duration: 500,
})
// => ['Hello', 'unknown message', 'audio 500 ms']

Try it

• Merge effector/fork into effector. Now all methods required for SSR are exported from the library itself, making effector/fork an alias
• Make Scope type alias for Fork
• Add support for es modules: import {createStore} from 'effector/effector.mjs'
• Effect without a handler now throws an error during a call instead of calling console.error with undefined return, which was violating the type of effect
• Remove restore aliases, event.filter(fn) alias for event.filterMap(fn), greedy in sample as separate last argument and unused blocks and Kind

effector-react 20.9.0

• Export useGate with fork support from effector-react/ssr

import {value useGate, value useStore, value Provider} from 'effector-react/ssr'
import {value createGate} from 'effector-react'
import {value createDomain, value forward} from 'effector'
import {value fork} from 'effector/fork'

const app = createDomain()

const activeChatGate = createGate({domain: app})

const getMessagesFx = app.createEffect({
  async handler({chatId}) {
    return ['hi bob!', 'Hello, Alice']
  },
})

const $messagesAmount = app
  .createStore(0)
  .on(getMessagesFx.doneData, (_, messages) => messages.length)

forward({
  from: activeChatGate.open,
  to: getMessagesFx,
})

const ChatPage = ({chatId}) => {
  useGate(activeChatGate, {chatId})

  return (
    <div>
      <header>Chat {chatId}</header>
      <p>Messages total: {useStore($messagesAmount)}</p>
    </div>
  )
}
const App = ({root}) => (
  <Provider value={root}>
    <ChatPage chatId="chat01" />
  </Provider>
)

const scope = fork(app)

ReactDOM.render(<App root={scope} />, document.getElementById('root'))

Try it

• Add domain optional field to createGate which will be used to create gate units (useful for ssr)

createGate({domain}) in documentation

• Improve useList hook typings for typescript exported from effector-react/ssr by allowing usage as components' return value (fix DefinitelyTyped issue)

effector-react 20.8.0

• Add ability to define default Gate state in createGate via defaultState field

createGate({defaultState}) in documentation

• Remove object restriction from createGate Props type in typescript, as it becomes useless with introduction of useGate. This code now passes type checking successfully

import {value createGate} from 'effector-react'

const RouteGate = createGate<string>()

const UserGate = createGate({defaultState: 'guest'})

effector-react 20.7.4

• Improve useStore support for React.StrictMode

effector-react 20.7.3, effector-vue 20.4.2

• Fix regression in effector-react/compat and effector-vue/compat compatibility with IE11

effector-react 20.7.1

• Improve useList hook typings for typescript by allowing usage as components' return value (fix DefinitelyTyped issue)

This code now works without type errors:

import {value createStore} from 'effector'
import {value useList} from 'effector-react'

const $users = createStore<User[]>([
  {
    username: 'alice',
    email: 'alice@example.com',
    bio: '. . .',
  },
  {
    username: 'bob',
    email: 'bob@example.com',
    bio: '~/ - /~',
  },
  {
    username: 'carol',
    email: 'carol@example.com',
    bio: '- - -',
  },
])
const UserList = () => useList($users, ({username}) => <p>{username}</p>)

const App = () => (
  <div>
    <UserList />
  </div>
)