effector-react - npm Package Versions

effector-vue 20.4.0

• Add support for vue component watch option (PR #313) (thanks @Fl0pZz)

import {createStore} from 'effector'
import {createComponent} from 'effector-vue'

const counter = createStore(0)

const component = createComponent(
  {
    template: '<div>{{ counter }}</div>',
    watch: {
      counter() {
        /* side-effects here */
      },
    },
  },
  {counter},
)

effector-vue 20.3.0

• Add createComponent HOC for TypeScript usage. This HOC provides type-safe properties in vue components.

// component.vue
import {value createStore, value createApi} from 'effector'
import {value createComponent} from 'effector-vue'

const $counter = createStore(0)
const {update} = createApi($counter, {
  update: (_, value: number) => value,
})

export default createComponent(
  {
    name: 'Counter',
    methods: {
      update,
      handleClick() {
        const value = this.$counter + 1 // this.$counter <- number ( typescript tips )
        this.update(value)
      },
    },
  },
  {$counter},
)

effector-react 20.2.2, effector-vue 20.1.2

• effector-react, effector-vue and effector itself have compat builds for compatibility with old devices without babel. In such versions, it should import effector/compat, not just effector (Fix #173)

effector-vue 20.2.1

• Add typescript typings for object shape, introduced in effector-vue 20.2.0

const counter = createStore(0)

new Vue({
  effector: {
    counter, // would create `counter` in template
  },
})

effector-vue 20.2.0

• Add support for object shape

const counter = createStore(0)

new Vue({
  effector: {
    counter, // would create `counter` in template
  },
})

effector 20.1.1

• Add support for IE11 to effector/compat
• Fix flow typings for sample
• Allow effector/babel-plugin to work in browser

effector-react 20.0.5

• Fix irrelevant react memory leak warning in a few cases

effector-react 20.0.4

• Fix a bug in useStore with lack of store updates triggered by react hooks in children components

effector-react 20.0.3

• Allow as const typescript assertion for useStoreMap keys. It helps us to infer type for fn arguments

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] as const,
    fn: (users, [id, field]) => users[id][field] || null,
  })

  return <div>{value}</div>
}

In typescript versions below 3.4, you can still use an explicit type assertion

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] as [number, keyof User],
    fn: (users, [id, field]) => users[id][field] || null,
  })

  return <div>{value}</div>
}

as const in typescript docs

effector-react 20.0.2

• Fix bug with additional rerender in case of useStore argument change