Redux Toolkit setup in React Native - Mini App: Build & Ship

Build: Counter Screen

A simple screen that shows a counter value and two buttons to increase or decrease the count using Redux Toolkit for state management.

Target UI

---------------------
|    Counter App    |
|                   |
|       Count: 0    |
|                   |
|  [-]       [+]    |
---------------------

Set up Redux Toolkit store with a counter slice

Create a React Native screen that displays the current count

Add two buttons: one to increment and one to decrement the count

Connect the screen to the Redux store using React-Redux hooks

Starter Code

React Native

import React from 'react';
import { Provider } from 'react-redux';
import { configureStore, createSlice } from '@reduxjs/toolkit';
import { View, Text, Button, StyleSheet } from 'react-native';

// TODO: Create counter slice here

// TODO: Configure store here

function CounterScreen() {
  // TODO: Access count from Redux store

  // TODO: Dispatch increment and decrement actions

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter App</Text>
      <Text style={styles.count}>Count: {/* count value here */}</Text>
      <View style={styles.buttons}>
        <Button title="-" onPress={() => { /* decrement action */ }} />
        <Button title="+" onPress={() => { /* increment action */ }} />
      </View>
    </View>
  );
}

export default function App() {
  // TODO: Provide the Redux store to the app
  return (
    <Provider store={/* store here */}>
      <CounterScreen />
    </Provider>
  );
}

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

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

React Native

import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import { configureStore, createSlice } from '@reduxjs/toolkit';
import { View, Text, Button, StyleSheet } from 'react-native';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1; },
    decrement: state => { state.value -= 1; }
  }
});

const store = configureStore({
  reducer: { counter: counterSlice.reducer }
});

function CounterScreen() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

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

export default function App() {
  return (
    <Provider store={store}>
      <CounterScreen />
    </Provider>
  );
}

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

We created a counterSlice using Redux Toolkit's createSlice function. It holds the counter state and two reducers: increment and decrement. The store is configured with this slice's reducer.

In the CounterScreen component, we use useSelector to read the current count from the Redux store. We use useDispatch to get the dispatch function and call the increment or decrement actions when the buttons are pressed.

The whole app is wrapped in Provider to give access to the Redux store.

This setup keeps state management clean and easy to maintain.

Final Result

Completed Screen

---------------------
|    Counter App    |
|                   |
|       Count: 0    |
|                   |
|  [-]       [+]    |
---------------------

Tapping [+] increases the count number by 1

Tapping [-] decreases the count number by 1

Stretch Goal

Add a reset button that sets the count back to zero

💡 Hint

Add a 'reset' reducer in the slice and a new Button that dispatches it