effector-react - npm Package Versions

effector-react 20.7.0

• Use shallow compare for skipping updates with useGate, thereby making it consistent with <Gate />
• Remove nesting from components, created by createContextComponent and createReactState, which previously were based on createComponent

effector-react 20.6.3

• Add type support for stores with ReadonlyArray to useList for typescript

effector-react 20.6.2, effector-vue 20.3.3

• Fix umd build of effector-react and effector-vue

Cdn with umd build of effector-react Cdn with umd build of effector-vue

effector 20.6.1, effector-react 20.4.1, effector-vue 20.3.2

• Add typescript typings for compat builds
• Improve built-in source maps

effector 20.6.0

• Add support for arrays to forward

import {createEvent, forward} from 'effector'

const firstSource = createEvent()
const secondSource = createEvent()
const firstTarget = createEvent()
const secondTarget = createEvent()

forward({
  from: [firstSource, secondSource],
  to: [firstTarget, secondTarget],
})

firstTarget.watch(e => console.log('first target', e))
secondTarget.watch(e => console.log('second target', e))

firstSource('A')
// => first target A
// => second target A
secondSource('B')
// => first target B
// => second target B

Try it

effector-react 20.5.2

• Add ability to infer fn argument types without as const in useStoreMap. In effector-react 20.0.3 we introduced an improvement for useStoreMap types, which helps to infer types of fn arguments from keys. And now useStoreMap types improved even more: every item in second argument will have its own type even without as const, out from a box

Type tests

useStoreMap in docs

PR #274 (thanks @abliarsar)

import React from 'react'
import {value createStore} from 'effector'
import {value useStoreMap} from 'effector-react'

type User = {
  username: string
  email: string
  bio: string
}

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: '- - -',
  },
])

export const UserProperty = ({id, field}: {id: number; field: keyof User}) => {
  const value = useStoreMap({
    store: $users,
    keys: [id, field],
    fn: (users, [id, field]) => users[id][field] || null,
  })
  return <div>{value}</div>
}

effector-vue 20.5.0

• Migrated from Vue.util.defineReactive to Vue.observable

• Effector stores will show in Vue devtools

• Cosmetic improvements for support plugin in the future.

• Now we can add some units to effector object (will be return Store<number>)

const fx = createEffect({...});

export default Vue.extend({
  effector: {
    isCompleted: fx.done
  },
  watch: {
    isCompleted(sid) {
      this.isPopupOpened = false;
    }
  },
  data: () => ({
    isPopupOpened: true,
  })
})

• Support v-model directive for scalar values

const $msg = createStore()

export default Vue.extend({
  effector: {
    $msg,
  },
})

<template>
  <input v-model="$msg" />
</template>

effector-react 20.7.3, effector-vue 20.4.2

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

effector-vue 20.4.1

• Improve typescript typings for usage via Vue.extend (PR #343)