PubNub LogoDocs
SupportContact SalesLoginTry Our APIs

›redux

redux

  • Overview
  • API Reference

    • Presence
    • Users
    • Channels
    • Errors
    • Members
    • Memberships
    • Messages
    • Network Status
    • Signals
  • Change Log
  • Commands
  • Components
  • Setup React-Redux
  • Subscription Status
  • Configure Redux

Configure Redux

To prepare your app to use the PubNub Redux framework, you will need to implement the following items. These instructions are non-prescriptive, to help you be free to follow your own app development process.

Configure the Store

A Redux application manages all application state in a centralized location called the store. To gain the benefits offered by the PubNub Redux framework, you must configure your store to include references to the PubNub libraries.

Create the PubNub Instance

let pubnub = new Pubnub({
  publishKey: "myPublishKey",
  subscribeKey: "mySubscribeKey"
});

Configure Reducers

let rootReducer = combineReducers(
  createNetworkStatusReducer(false),
  createMessageReducer(),
  createPresenceReducer(),
  createUserDataReducer(),
  createChannelDataReducer(),
  createMembershipReducer(),
  createChannelMembersReducer(),
);

Configure Redux Thunk Middleware

The PubNub Redux framework uses Redux Thunk to manage the interaction with commands that execute PubNub API calls, process the responses, and dispatch Redux actions.

let thunkArgument = {
  pubnub: {
    api: pubnub
  }
};

let middleware = applyMiddleware(ReduxThunk.withExtraArgument(thunkArgument));

Complete the Store Configuration

let myStore = createStore(
  rootReducer,
  undefined,
  middleware,
);

Register Listeners

You can register all the listeners that are included in the PubNub Redux framework.

pubnub.addListener(createPubnubListener(store.dispatch));

You can also choose to register only specific listeners and combine with other listeners in your application.

pubnub.addListener(
  combineListeners(
    createNetworkStatusListener(store.dispatch),
    createMessageListener(store.dispatch),
    createPresenceListener(store.dispatch),
    // a custom listener
    {
      status: (status) => {
        console.log(status)
      }
    }
  )
);
← Subscription Status
  • Configure the Store
    • Create the PubNub Instance
    • Configure Reducers
    • Configure Redux Thunk Middleware
    • Complete the Store Configuration
  • Register Listeners
© PubNub Inc. - Privacy Policy