Using the Redux SDK

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)
      }
    }
  )
);