Creating a React Native Expo project with Redux Toolkit and Thunk

In this guide, I will walk you through the process step by step. Please make sure you have Node.js, npm (Node Package Manager), and Expo CLI installed on your system.

Prerequisites
Creating a New React Native Expo Project
Installing Redux Toolkit and Thunk
Setting Up Redux Store
Creating Actions and Reducers
Connecting Redux to Your Components
Thunk Middleware for Asynchronous Actions
Testing Your Redux Setup
Building and Running Your App

1. Prerequisites

Before you start, make sure you have the following tools installed:

Node.js and npm (You can download them from the official website)
Expo CLI (Install it using npm install -g expo-cli)

2. Creating a New React Native Expo Project

First, create a new Expo project if you haven't already:

expo init MyReduxApp
cd MyReduxApp

Follow the instructions to set up your project, and then navigate to your project directory:

cd MyReduxApp

3. Installing Redux Toolkit and Thunk

Install Redux Toolkit and Thunk in your project:

npm install @reduxjs/toolkit react-redux redux-thunk

4. Setting Up Redux Store

Create a folder called store in your project directory to organize your Redux-related files. Inside the store folder, create a file called store.js:

// store.js
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers'; // Create this file in the next section
import thunk from 'redux-thunk';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),
});

export default store;

5. Creating Actions and Reducers

In the store folder, create a file called reducers.js. This is where you'll define your reducers using Redux Toolkit:

// reducers.js
import { combineReducers } from 'redux';
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  // Define your initial state here
};

const mySlice = createSlice({
  name: 'myData',
  initialState,
  reducers: {
    // Define your actions and reducers here
  },
});

const rootReducer = combineReducers({
  myData: mySlice.reducer,
  // Add more slices as needed
});

export default rootReducer;

Define your actions and reducers inside the mySlice slice, and feel free to create more slices as needed for different parts of your application.

6. Connecting Redux to Your Components

You'll need to use the react-redux library to connect your components to the Redux store. Let's assume you have a component named MyComponent that should access your Redux state. Here's how to do it:

// MyComponent.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { someAction } from './store/reducers'; // Import your actions

const MyComponent = () => {
  const myData = useSelector((state) => state.myData);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{myData.someValue}</p>
      <button onClick={() => dispatch(someAction())}>Dispatch Action</button>
    </div>
  );
};

export default MyComponent;

7. Thunk Middleware for Asynchronous Actions

You can use Thunk middleware to handle asynchronous actions. For example, you can create an async action like this:

// store/reducers.js
import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchData = createAsyncThunk('myData/fetchData', async (payload, { dispatch, getState }) => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    dispatch(setData(data));
  } catch (error) {
    console.error('Error fetching data:', error);
  }
});

8. Testing Your Redux Setup

Run your application with Expo to test your Redux setup:

expo start

9. Building and Running Your App

Once you're satisfied with your app and want to create a production build, you can use Expo to build and deploy it.

Building the app:

expo build:android
# or
expo build:ios

This command will generate APK (for Android) or IPA (for iOS) files that you can use to install and distribute your app.

That's it! You've successfully set up a React Native Expo project with Redux Toolkit and Thunk for state management and asynchronous actions. You can now build and expand your application with powerful state management capabilities.

Blog