React Native Academy · Lesson

Setting Up the Redux Store and Provider

Install @reduxjs/toolkit and react-redux, configure the store with configureStore, and wrap the app in a Provider to make the store available globally.

Setting Up the Redux Store and Provider is a free React Native Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Native Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is Redux Toolkit?

Redux Toolkit (RTK) is the official, recommended way to write Redux logic today. It eliminates the boilerplate of classic Redux by providing utility functions like configureStore, createSlice, and createAsyncThunk. RTK includes best practices by default, such as Immer for immutable updates and Redux DevTools integration.

Installing the Required Packages

To get started with Redux Toolkit in React Native, you need two packages: @reduxjs/toolkit provides the core utilities, and react-redux provides the React bindings. Install them with a single command and they are ready to use immediately.

npm install @reduxjs/toolkit react-redux

Configuring the Store

The store is the single source of truth for your entire Redux application state. You create it with configureStore, passing a reducer object that maps slice names to their reducer functions. RTK automatically sets up Redux DevTools and applies recommended middleware like redux-thunk.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Wrapping the App with Provider

The Provider component from react-redux makes the Redux store available to every component in your React Native component tree. Wrap your root component (or NavigationContainer if using React Navigation) with <Provider store={store}>. Any component inside the tree can then access the store using hooks.

import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store';
import AppNavigator from './navigation/AppNavigator';

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

Understanding the Redux Data Flow

Redux enforces a strict unidirectional data flow: the UI dispatches an action, the reducer processes that action to produce a new state, the store saves the new state, and the UI re-renders to reflect the change. This predictable cycle makes debugging and testing straightforward, because every state change is traceable to a specific action.

TypeScript Typed Hooks

In TypeScript projects it is best practice to create typed versions of useDispatch and useSelector so you get autocompletion and type safety throughout the app. Export useAppDispatch and useAppSelector from a hooks file and import them in your components instead of the raw hooks.

import { useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } from './store';

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector = <T>(selector: (state: RootState) => T): T =>
  useSelector(selector);

The Reducer Object in configureStore

The reducer key inside configureStore accepts an object where each key becomes a slice name in the global state. For example, passing { counter: counterReducer, user: userReducer } means your state shape is { counter: {...}, user: {...} }. You can add more slices at any time without changing existing slices.

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    user: userReducer,
    products: productsReducer,
  },
});

Redux DevTools Integration

configureStore automatically enables the Redux DevTools browser extension in development mode. With DevTools you can inspect the current state, view every dispatched action, and even time-travel back to a previous state snapshot. This is one of the biggest debugging advantages of using Redux over plain useState.

Default Middleware in Redux Toolkit

RTK's configureStore adds several middleware by default: redux-thunk for async action creators, serializability check middleware that warns when non-serializable values (like functions or class instances) are placed in state, and an immutability check that warns if state is mutated directly. You can customize this with the middleware option.

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

export const store = configureStore({
  reducer: { counter: counterReducer },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

Organizing the Store Folder

A clean folder structure makes Redux apps maintainable. The common pattern is a store/ folder with an index.ts for the store configuration and a features/ subfolder where each feature has its own slice file. For example: store/features/counter/counterSlice.ts. Keep slice files small and focused on a single domain concept.

src/
  store/
    index.ts          // configureStore + exports
    hooks.ts          // useAppDispatch, useAppSelector
    features/
      counter/
        counterSlice.ts
      user/
        userSlice.ts

Verifying the Store Is Connected

A quick sanity check after wiring up the Provider is to log store.getState() in the store file. This prints the initial state to the console and confirms the reducer map is correctly structured. Once you see the expected shape — for example { counter: { value: 0 } } — you know the store is ready for components to read from and write to.

import { store } from './store';
console.log('Initial state:', store.getState());
// Output: { counter: { value: 0 }, user: { name: null } }

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: Redux Toolkit reduces boilerplate with configureStore and built-in middleware, the Provider component makes the store accessible to the entire component tree, and typed hooks (useAppDispatch, useAppSelector) add TypeScript safety to your Redux code. Next up we explore creating slices with createSlice.

Frequently asked questions

Is the “Setting Up the Redux Store and Provider” lesson free?

Yes — the full text of “Setting Up the Redux Store and Provider” is free to read here on the web, and the React Native Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Native Academy course, upgrade to CoddyKit PRO.

What will I learn in “Setting Up the Redux Store and Provider”?

Install @reduxjs/toolkit and react-redux, configure the store with configureStore, and wrap the app in a Provider to make the store available globally. You practise React Native Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Native Academy?

No prior experience is required. React Native Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Setting Up the Redux Store and Provider” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Native Academy lesson?

Yes. Every React Native Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Native Academy