Set up a React-Redux App

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.

   npx create-react-app team-chat --typescript

2. Enter the directory for your React app and run the setup script.

   cd team-chat
   npm install

Install Redux

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

1. Install support for the Redux application framework.

   npm install redux

2. Install the Redux Thunk middleware to support asynchronous requests.

   npm install redux-thunk

3. Install support for Redux-compatible React components.

   npm 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.

   npm install pubnub
   npm install @types/pubnub

2. Install the PubNub Redux Framework. It installs its own TypeScript definitions.

   npm 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:

npm start

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

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.

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.