React Native Example

The following example is a React Native counter that stores data to AsyncStorage. It uses store, event and effects.

import * as React from 'react'
import {Text, View, StyleSheet, TouchableOpacity} from 'react-native'
import AsyncStorage from '@react-native-community/async-storage'

import {createStore, createEvent, createEffect} from 'effector'
import {useStore} from 'effector-react'

const init = createEvent('init')
const increment = createEvent('increment')
const decrement = createEvent('decrement')
const reset = createEvent('reset')

const fetchCountFromAsyncStorageFx = createEffect({
  handler: async () => {
    const value = parseInt(await AsyncStorage.getItem('count'))
    return !isNaN(value) ? value : 0
  },
})

const updateCountInAsyncStorageFx = createEffect({
  handler: async count => {
    try {
      await AsyncStorage.setItem('count', `${count}`, err => {
        if (err) console.error(err)
      })
    } catch (err) {
      console.error(err)
    }
  },
})

fetchCountFromAsyncStorageFx()

fetchCountFromAsyncStorageFx.doneData.watch(result => {
  init(result)
})

const counter = createStore(0)
  .on(increment, state => state + 1)
  .on(decrement, state => state - 1)
  .on(init, (state, value) => value)
  .reset(reset)

counter.watch(state => {
  updateCountInAsyncStorageFx(state)
})

export default () => {
  const count = useStore(counter)
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{count}</Text>
      <View style={styles.buttons}>
        <TouchableOpacity key="dec" onPress={decrement} style={styles.button}>
          <Text style={styles.label}>-</Text>
        </TouchableOpacity>
        <TouchableOpacity key="reset" onPress={reset} style={styles.button}>
          <Text style={styles.label}>0</Text>
        </TouchableOpacity>
        <TouchableOpacity key="inc" onPress={increment} style={styles.button}>
          <Text style={styles.label}>+</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 20,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 60,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  buttons: {
    flexDirection: 'row',
    alignSelf: 'center',
    justifyContent: 'space-between',
  },
  button: {
    marginHorizontal: 10,
    paddingVertical: 10,
    paddingHorizontal: 20,
    backgroundColor: '#4287f5',
    borderRadius: 5,
  },
  label: {
    fontSize: 30,
    color: '#ffffff',
    fontWeight: 'bold',
  },
})