useReduceExample.tsx

import React, { useReducer, useContext, ReactNode } from 'react'
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native'

const initialArg = 0

type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'set'; count: number }

const reducer = (state: number, action: Action) => {
  switch (action.type) {
    case 'increment': return state + 1
    case 'decrement': return state - 1
    case 'set': return action.count
    default: throw new Error('Unexpected action')
  }
}

const Context = React.createContext(initialArg as any)

const CountProvider = ({ children }: { children: ReactNode }) => {
  const contextValue = useReducer(reducer, initialArg)
  return (
    <Context.Provider value={contextValue}>
      {children}
    </Context.Provider>
  )
}

const useCount = () => {
  const contextValue = useContext(Context)
  return contextValue
}

const Counter = () => {
  const [count, dispatch] = useCount()
  return (
    <View style={styles.container}>
      <Text>{count}</Text>
      <View style={styles.buttons}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => dispatch({ type: 'increment' })
        }>
          <Text>+1</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.button}
          onPress={() => dispatch({ type: 'decrement' })
        }>
          <Text>-1</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.button}
          onPress={() => dispatch({ type: 'set', count: 0 })
        }>
          <Text>reset</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}

export default function App() {
  return (
    <CountProvider>
      <Counter />
    </CountProvider>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  button: {
    padding: 20,
  }
})