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

Practice

1. What is the main purpose of configureStore in Redux Toolkit?

easy

A. To create the Redux store with reducers and middleware setup automatically

B. To dispatch actions to update the store

C. To connect React components to the Redux store

D. To define action creators manually

Solution

1. Step 1: Understand configureStore role

   configureStore is a Redux Toolkit function that simplifies creating the Redux store by automatically combining reducers and adding middleware.

2. Step 2: Differentiate from other Redux tasks

   Dispatching actions and connecting components are done elsewhere, not by configureStore.

3. Final Answer:

   To create the Redux store with reducers and middleware setup automatically -> Option A

4. Quick Check:

   configureStore creates store [OK]

Hint: Remember: configureStore builds the store, not dispatch or connect [OK]

Common Mistakes:

• Confusing store creation with dispatching actions
• Thinking configureStore connects React components
• Assuming manual action creators are needed here

2. Which of the following is the correct syntax to create a Redux store using Redux Toolkit?

easy

A. const store = createStore(rootReducer);

B. const store = configureStore(rootReducer);

C. const store = configureStore({ reducer: rootReducer });

D. const store = new Store(rootReducer);

Solution

1. Step 1: Recall Redux Toolkit store creation syntax

   Redux Toolkit uses configureStore with an object argument containing the reducer key.

2. Step 2: Identify correct usage

   const store = configureStore({ reducer: rootReducer }); correctly passes an object with reducer: rootReducer. Options A and C use old or invalid syntax. const store = configureStore(rootReducer); passes reducer directly without an object, which is incorrect.

3. Final Answer:

   const store = configureStore({ reducer: rootReducer }); -> Option C

4. Quick Check:

   configureStore expects an object with reducer [OK]

Hint: Use configureStore({ reducer: ... }) syntax exactly [OK]

Common Mistakes:

• Passing reducer directly instead of inside an object
• Using createStore instead of configureStore
• Trying to instantiate Store with new keyword

3. Given this Redux Toolkit slice setup, what will be the initial state of the store?

import { configureStore, createSlice } from '@reduxjs/toolkit';

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

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

console.log(store.getState());

medium

A. { counter: { value: 0 } }

B. {}

C. { value: 10 }

D. { counter: { value: 10 } }

Solution

1. Step 1: Identify initialState in slice

   The slice defines initialState: { value: 10 } for the counter.

2. Step 2: Understand store state shape

   The store combines reducers under the key counter, so the state shape is { counter: { value: 10 } }.

3. Final Answer:

   { counter: { value: 10 } } -> Option D

4. Quick Check:

   Initial state matches slice's initialState under reducer key [OK]

Hint: Initial state is inside reducer key in store state [OK]

Common Mistakes:

• Ignoring reducer key nesting in state
• Assuming initial value is 0 by default
• Confusing slice state with root state shape

4. Identify the error in this Redux Toolkit store setup code:

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore(reducer: rootReducer);

export default store;

medium

A. Missing curly braces around the reducer argument object

B. Using configureStore instead of createStore

C. rootReducer should be a string, not a variable

D. Export statement is incorrect

Solution

1. Step 1: Check configureStore argument syntax

   configureStore expects an object argument, so the reducer must be inside curly braces: { reducer: rootReducer }.

2. Step 2: Verify other parts

   Using configureStore is correct. rootReducer is a variable, which is valid. Export statement is fine.

3. Final Answer:

   Missing curly braces around the reducer argument object -> Option A

4. Quick Check:

   configureStore({ reducer: ... }) needs braces [OK]

Hint: Always pass an object with reducer key to configureStore [OK]

Common Mistakes:

• Passing reducer directly without braces
• Confusing configureStore with createStore
• Thinking export default is wrong here

5. You want to connect your React Native app to Redux using Redux Toolkit. Which is the correct way to wrap your app component to provide the store? A) <Provider store={store}><App /></Provider> B) <StoreProvider store={store}><App /></StoreProvider> C) <ReduxProvider store={store}><App /></ReduxProvider> D) <App store={store} />

hard

A.

B.

C.

D.

Solution

1. Step 1: Identify the correct provider component

   Redux Toolkit uses the Provider component from react-redux to supply the store to the app.

2. Step 2: Confirm correct usage

   The Provider wraps the root App component with the store prop. Other options use incorrect or nonexistent components.

3. Final Answer:

   <Provider store={store}><App /></Provider> -> Option B

4. Quick Check:

   Use Provider from react-redux to connect store [OK]

Hint: Wrap app in for Redux connection [OK]

Common Mistakes:

• Using wrong provider component names
• Passing store as a prop directly to App
• Forgetting to wrap the app at all