---
source_url: https://www.pubnub.com/docs/sdks/redux/react-tutorial
title: React Tutorial for Redux SDK
updated_at: 2026-06-29T11:49:49.187Z
---

> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt


# React Tutorial for Redux SDK

The PubNub Redux Framework provides interfaces for front-end view components to connect to the PubNub service through a predictable state-management layer. This reference section shows you how to set up the PubNub Redux Framework for use in your application.

The instructions on this page assume that you will be building your application using the React framework. If you are using a different framework, the framework setup must generate the required `package.json` file before you can install the Redux package.

## Initialize a new React app

Start by initializing a React application that supports TypeScript.

1. Create a new React app in the team-chat folder. You can use Vite (recommended) or Create React App: Using Vite (recommended): 1npm create vite@latest team-chat -- --template react-ts2cd team-chat3npm install Using Create React App: Create React App StatusCreate React App is in maintenance mode. For new projects, consider using Vite or other modern build tools. 1npx create-react-app team-chat --template typescript
2. If you used Create React App, enter the directory for your React app and run the setup script. 1cd team-chat2npm install

## Install Redux

Install Redux into your project folder. Redux installs its own TypeScript definitions.

1. Install support for the Redux application framework. 1npm install redux
2. Install the Redux Thunk middleware to support asynchronous requests. 1npm install redux-thunk
3. Install support for Redux-compatible React components. 1npm install react-redux

## Install PubNub SDKs

To install the SDKs and required libraries, do the following:

1. Install the PubNub JavaScript SDK that communicates with the PubNub service API. This SDK requires additional TypeScript definitions. 1npm install pubnub
2. Install the PubNub Redux Framework. It installs its own TypeScript definitions. 1npm install pubnub-redux

## Test the setup

After you have installed the Redux and PubNub Redux libraries in your project, run the following command to open a web browser to view the React app:

```bash
npm start
```

If you see the following screenshot, then **congratulations!** Your app is ready.

![Basic React-Redux App](https://www.pubnub.com/assets/images/redux-app-init-7d9939bb0e4d83eb41bc96d7a7ffd1e0.jpg)

If you don't see the screenshot, then an error occurred while installing the Redux and PubNub Redux libraries. Delete the app folder and follow these steps again. If you still experience errors, contact [PubNub Support](https://support.pubnub.com/hc/en-us).

## Next steps

Now that you have a basic React app connected to the Redux Framework, you can continue to build your app, supported by the predictable state-management power of Redux.