Nuclear Powered Mushroom

    pubnub-redux
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.13 • Public • Published

    PubNub Redux SDK

    Build Status

    The PubNub Redux SDK offers a data management framework that listens to realtime events generated by the PubNub network to update the view inside your application. And of course, your data can coexist with PubNub-defined data.

    The Redux SDK is an npm module that provides Redux-specific functions which can be integrated with your existing or new Redux data store.

    Note: This is a beta version of the PubNub Redux SDK

    Table of Contents

    Concepts

    The PubNub Redux SDK includes the following components that you help manage your application’s state and PubNub server communications.

    • Actions: Preconfigured actions that correspond to PubNub internals
    • Reducers: Configured to respond to the actions dispatched by the PubNub Redux SDK
    • Listeners: Monitor subscription notifications and dispatch actions
    • Commands: Functions that execute PubNub API calls and dispatch actions

    Supported Features

    • Sending and Receiving Messages
    • Indicating User Presence
    • Monitoring Network Status
    • Managing User Data
    • Managing Channel Data
    • Managing Channel Memberships

    Not Yet Supported

    • PubNub Access Manager
    • Storage and Playback
    • Signals
    • Message Actions

    Dependencies

    • pubnub 4.28.3 or later
    • redux 4.0.4 or later
    • redux-thunk 2.3.0 or later

    Setup Instructions

    This section provides the basic integration setps to connect the PubNub Redux SDK into your existing application. For an example of an application built on top of this SDK, go to our reference application site at: https://www.pubnub.com/docs/chat/quickstart

    Before You Begin

    Before you can create an application with the PubNub Redux SDK, obtain a set of chat-optimized keys from your PubNub Dashboard.

    In the following instructions, replace the following references with key values from your PubNub Dashboard.

    • myPublishKey
    • mySubscribeKey

    Install the PubNub Redux libraries

    npm install redux
    npm install redux-thunk
    npm install pubnub
    npm install pubnub-redux

    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 SDK, 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(),
      createUUIDMetadataReducer(),
      createUUIDMetadataListReducer(),
      createChannelMetadataReducer(),
      createChannelMetadataListReducer(),
      createMembershipReducer(),
      createChannelMembersReducer(),
    );

    Configure Redux Thunk Middleware

    The PubNub Redux SDK 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 SDK.

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

    Usage Examples

    This section contains a few examples of commands to get your started. This is not meant to be an exhaustive list. Also, you can create commands in your application that use our actions to meet your requirements.

    Sending a Message

    dispatch(sendMessage({
      channel: 'my-channel',
      message: {
        title: 'hello world',
        body: 'This is our hello world message.'
      }
    }));

    Set User Data

    dispatch(setUserData({
      uuid: 'my-user-id',
      data: {
        name: 'User Name'
      }
    }));

    Fetch User Data

    dispatch(fetchUserData({
      uuid: 'my-user-id'
    }));

    Set Channel Data

    dispatch(setChannelData({
      channel: 'my-channel-id',
      data: {
        name: 'Channel Name'
      }
    }));

    Set Memberships

    dispatch(setMemberships({
      uuid: 'my-user-id',
      channels: [{
        id: 'channel-id'
      }]
    }));

    Keywords

    none

    Install

    npm i pubnub-redux

    DownloadsWeekly Downloads

    717

    Version

    0.0.13

    License

    none

    Unpacked Size

    871 kB

    Total Files

    84

    Last publish

    Collaborators

    • stephenlb
    • pubnub-admin
    • davidnub
    • raipubnub
    • client-engineering-bot