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.
-
Create a new React app in the
team-chat
folder.1npx create-react-app team-chat --typescript
-
Enter the directory for your React app and run the setup script.
1cd team-chat
2npm install
Install Redux
Install Redux into your project folder. Redux installs its own TypeScript definitions.
-
Install support for the Redux application framework.
1npm install redux
-
Install the Redux Thunk middleware to support asynchronous requests.
1npm install redux-thunk
-
Install support for Redux-compatible React components.
1npm install react-redux
Install PubNub SDKs
To install the SDKs and required libraries, do the following:
-
Install the PubNub JavaScript SDK that communicates with the PubNub service API. This SDK requires additional TypeScript definitions.
1npm install pubnub
2npm install @types/pubnub -
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:
1npm 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.