CHAPTER 17 Beginner

Redux Toolkit for React Native

Updated: May 16, 2026

6 min read

# CHAPTER 17

Redux Toolkit for React Native

1. Introduction

While Context API is great for toggling dark mode, it lacks the strict architecture required for enterprise applications managing thousands of complex data points (like banking apps or social networks). Enter Redux. Historically, Redux was notorious for requiring massive amounts of "boilerplate" code. Today, the modern standard is Redux Toolkit (RTK), which cuts the code required by 80%. In this chapter, we will master Redux Toolkit for React Native. We will learn the strict, predictable cycle of Redux: configuring a central Store, writing modular Slices (Reducers), and connecting our UI using useSelector and useDispatch.

2. Learning Objectives

By the end of this chapter, you will be able to:

Understand the strict one-way data flow of Redux (Action -> Reducer -> Store).

Install @reduxjs/toolkit and react-redux.

Configure the central Redux Store.

Create a feature "Slice" containing state, reducers, and generated actions.

Read data using useSelector and update data using useDispatch.

3. The Redux Philosophy

Redux forces you to follow strict rules to ensure your data is perfectly predictable:

1. The Store: There is only ONE giant JavaScript object holding all the global state.

2. Read-Only: The UI cannot change the state directly. It can only "dispatch an action" (like sending a formal request letter).

3. Reducers: Pure functions that receive the action, calculate the new data, and securely update the Store.

4. Installation

Install the two required packages:

bash

npm install @reduxjs/toolkit react-redux

5. Step 1: Create a Slice (The Logic)

A "Slice" handles the data and logic for one specific feature (e.g., the Shopping Cart). RTK's createSlice automatically generates the actions and reducers for you!

javascript

1234567891011121314151617181920212223242526

// features/cartSlice.js
import { createSlice } from &#039;@reduxjs/toolkit&#039;;

const cartSlice = createSlice({
  name: &#039;cart&#039;, // Name of the slice
  initialState: {
    items: 0,   // Default data
  },
  reducers: {
    // Reducer 1: Add an item
    addItem: (state) => {
      // RTK uses 'Immer' under the hood. You CAN mutate state directly here!
      state.items += 1; 
    },
    // Reducer 2: Clear the cart
    clearCart: (state) => {
      state.items = 0;
    }
  }
});

// Export the generated actions so the UI can use them!
export const { addItem, clearCart } = cartSlice.actions;

// Export the reducer so the Store can use it!
export default cartSlice.reducer;

6. Step 2: Configure the Store (The Vault)

Now we create the central vault and register our Slice.

store.js

123456789

import { configureStore } from &#039;@reduxjs/toolkit&#039;;
import cartReducer from &#039;./features/cartSlice&#039;;

export const store = configureStore({
  reducer: {
    // Register the cart slice under the 'cart' namespace
    cart: cartReducer, 
  },
});

7. Step 3: Provide the Store

Just like Context, we must wrap our root application (App.js) in a Provider so the screens can access the Store.

App.js

12345678910111213

import React from &#039;react&#039;;
import { Provider } from &#039;react-redux&#039;;
import { store } from &#039;./store&#039;;
import MainScreen from &#039;./MainScreen&#039;;

export default function App() {
  return (
    // Pass the store to the Provider!
    <Provider store={store}>
      <MainScreen />
    </Provider>
  );
}

8. Step 4: Connecting the UI (Hooks)

The setup is done. Now, any screen can read data or trigger actions using two magical Hooks.

useSelector: Grabs data from the Store.

useDispatch: Fires an action to the Reducers.

MainScreen.js

12345678910111213141516171819202122232425

import React from &#039;react&#039;;
import { View, Text, Button } from &#039;react-native&#039;;
import { useSelector, useDispatch } from &#039;react-redux&#039;;
import { addItem, clearCart } from &#039;./features/cartSlice&#039;; // Import the actions!

export default function MainScreen() {
  
  // 1. READ: Grab the 'items' count from the 'cart' slice in the Store
  const cartCount = useSelector((state) => state.cart.items);
  
  // 2. SETUP: Get the dispatch mechanism
  const dispatch = useDispatch();

  return (
    <View style={{ flex: 1, justifyContent: &#039;center&#039;, alignItems: &#039;center&#039; }}>
      
      <Text style={{ fontSize: 24 }}>Items in Cart: {cartCount}</Text>
      
      {/* 3. WRITE: Dispatch the actions! */}
      <Button title="Add to Cart" onPress={() => dispatch(addItem())} />
      <Button title="Empty Cart" onPress={() => dispatch(clearCart())} color="red" />
      
    </View>
  );
}

9. Visual Learning: The Redux Cycle

txt

1234567891011121314

[ UI Button ] --(Clicks)--> [ useDispatch(addItem()) ]
                                      |
                                  (Action Sent)
                                      v
                               [ cartSlice Reducer ]
                               (Calculates state.items += 1)
                                      |
                                  (Updates)
                                      v
                             [ Central REDUX STORE ]
                                      |
                                (Auto-Updates UI)
                                      v
                           [ useSelector() reads new data! ]

10. Common Mistakes

Forgetting to Export Actions: You write a brilliant removeItem reducer in your slice, but when you try to dispatch(removeItem()) in the UI, the app crashes. Why? You forgot to add removeItem to the export const { ... } = cartSlice.actions; list at the bottom of the slice file!

11. Practice Exercises

1. What official package revolutionized Redux by removing massive amounts of boilerplate code and introducing createSlice and configureStore?

2. Write the line of code using useSelector to extract a variable named isLoggedIn from a slice named auth within the Redux store.

12. MCQs with Answers

Question 1

In the strict Redux architecture, how is a UI component legally permitted to update the global data stored in the central Store?

Question 2

When writing a reducer function inside Redux Toolkit's `createSlice`, why are developers allowed to write mutating code like `state.items += 1`, even though traditional React strictly forbids direct state mutation?

13. Interview Questions

Q: Compare the use cases for the Context API versus Redux Toolkit in a large-scale React Native application. When does Redux become strictly necessary?

Q: Walk through the complete Redux unidirectional data flow, from a user tapping a button on the screen to the UI updating with the new value. Use the specific terminology: Dispatch, Action, Reducer, and Store.

Q: Explain the purpose of the PayloadAction in a Redux reducer. How would you dispatch a specific product ID to a removeProduct reducer?

14. FAQs

Q: Does Redux data save permanently if the user closes the app? A: No. Redux is just RAM memory. If the app is killed, the Store is wiped clean. If you want the data to survive restarts, you must use a library called Redux Persist, which automatically copies the Store to the phone's hard drive!

15. Summary

In Chapter 17, we engineered an enterprise-grade state architecture. We transcended the limitations of local state by implementing Redux Toolkit. We centralized our application data within a highly structured Store. We partitioned logic using Slices, defining strict Reducers to handle state mutations cleanly via Immer. Finally, we connected our UI layer to this data powerhouse, seamlessly extracting values using useSelector and triggering highly predictable state updates utilizing useDispatch.

16. Next Chapter Recommendation

Our application is perfectly structured, but it is currently isolated from the world. It needs real data from the internet. Proceed to Chapter 18: API Calls and Fetch Requests.

Browse All 21+ Subject Areas

Quick Links

Visual Algorithm Labs

Frontend Dev

The Future of Web Architecture in 2026

Practice Quizzes

Redux Toolkit for React Native #

1. Introduction #

2. Learning Objectives #

3. The Redux Philosophy #

4. Installation #

5. Step 1: Create a Slice (The Logic) #

6. Step 2: Configure the Store (The Vault) #

7. Step 3: Provide the Store #

8. Step 4: Connecting the UI (Hooks) #

9. Visual Learning: The Redux Cycle #

10. Common Mistakes #

11. Practice Exercises #

12. MCQs with Answers #

In the strict Redux architecture, how is a UI component legally permitted to update the global data stored in the central Store?

When writing a reducer function inside Redux Toolkit's createSlice, why are developers allowed to write mutating code like state.items += 1, even though traditional React strictly forbids direct state mutation?

13. Interview Questions #

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #

Finish this Chapter

Discussion

Explore More

📖 Related Tutorials 5

Send Feedback / Bug

Feedback Submitted!

Redux Toolkit for React Native

1. Introduction

2. Learning Objectives

3. The Redux Philosophy

4. Installation

5. Step 1: Create a Slice (The Logic)

6. Step 2: Configure the Store (The Vault)

7. Step 3: Provide the Store

8. Step 4: Connecting the UI (Hooks)

9. Visual Learning: The Redux Cycle

10. Common Mistakes

11. Practice Exercises

12. MCQs with Answers

When writing a reducer function inside Redux Toolkit's `createSlice`, why are developers allowed to write mutating code like `state.items += 1`, even though traditional React strictly forbids direct state mutation?

13. Interview Questions

14. FAQs

15. Summary

16. Next Chapter Recommendation