useReducer hook in React Native - Mini App: Build & Ship

Build: Counter with useReducer

A simple counter app that uses the useReducer hook to increase, decrease, and reset the count.

Target UI

---------------------
|    Counter App    |
---------------------
|                   |
|       0           |
|                   |
|  [+]  [-]  Reset  |
---------------------

Display the current count starting at 0

Add three buttons: '+' to increase, '-' to decrease, and 'Reset' to set count back to 0

Use the useReducer hook to manage the count state

Buttons should update the count accordingly

Starter Code

React Native

import React, { useReducer } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const initialState = 0;

function reducer(state, action) {
  // TODO: Implement reducer logic here
  return state;
}

export default function Counter() {
  const [count, dispatch] = useReducer(reducer, initialState);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter App</Text>
      <Text style={styles.count}>{count}</Text>
      <View style={styles.buttons}>
        {/* TODO: Add buttons to dispatch actions */}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, marginBottom: 20 },
  count: { fontSize: 48, marginBottom: 20 },
  buttons: { flexDirection: 'row', justifyContent: 'space-between', width: 200 }
});

Task 1

Task 2

Solution

React Native

import React, { useReducer } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const initialState = 0;

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    case 'reset':
      return 0;
    default:
      return state;
  }
}

export default function Counter() {
  const [count, dispatch] = useReducer(reducer, initialState);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter App</Text>
      <Text style={styles.count}>{count}</Text>
      <View style={styles.buttons}>
        <Button title="+" onPress={() => dispatch({ type: 'increment' })} />
        <Button title="-" onPress={() => dispatch({ type: 'decrement' })} />
        <Button title="Reset" onPress={() => dispatch({ type: 'reset' })} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, marginBottom: 20 },
  count: { fontSize: 48, marginBottom: 20 },
  buttons: { flexDirection: 'row', justifyContent: 'space-between', width: 200 }
});

We use the useReducer hook to manage the counter state instead of useState. The reducer function takes the current state and an action, then returns the new state based on the action type.

We handle three actions: increment adds 1, decrement subtracts 1, and reset sets the count back to 0.

The buttons dispatch these actions when pressed, updating the count displayed on the screen.

Final Result

Completed Screen

---------------------
|    Counter App    |
---------------------
|                   |
|       0           |
|                   |
|  [+]  [-]  Reset  |
---------------------

Tapping '+' increases the number by 1

Tapping '-' decreases the number by 1

Tapping 'Reset' sets the number back to 0

Stretch Goal

Add a limit so the count cannot go below 0

💡 Hint

Modify the reducer to return the current state if decrement would make it negative