Menu
Menu Sheet Overlay
Search
Search Sheet

Redux Actions and Selectors Reference

    Included here is a list of available Redux actions and selectors for Push Messaging. You may find these useful when integrating Push Messaging into your existing project or when creating your own Push Messaging component.

    Before you begin #

    Redux actions #

    The following actions are located in progressive-web-sdk/dist/store/push-messaging/actions

    subscribeOnClick()

    import {subscribeOnClick} from 'progressive-web-sdk/dist/store/push-messaging/actions'

    Call this to subscribe the user to push notifications, by opening the system-ask dialog to ask for permissions. If the user has already granted or blocked permissions for this site, nothing will happen.

    Typically, this is added as the React onClick event handler for an interactive element like an opt-in button.

    channelOfferShown()

    import {channelOfferShown} from 'progressive-web-sdk/dist/store/push-messaging/actions'

    Call this when the user has seen a Push messaging component asking them to subscribe. Typically, this can be called inside the React componentDidMount lifecycle method.

    Reselect selectors #

    The following selectors are located in progressive-web-sdk/dist/store/push-messaging/selectors

    isSupported

    import {isSupported} from 'progressive-web-sdk/dist/store/push-messaging/selectors'

    type: boolean

    Returns true if:

    You can use this to determine whether to show a Push messaging component or not.

    isSubscribed

    import {isSubscribed} from 'progressive-web-sdk/dist/store/push-messaging/selectors'

    type: boolean

    Whether the user is already subscribed to Push messaging. You can use this to determine whether a “success” message is shown to the user instead of a button asking them to subscribe.

    canSubscribe

    import {canSubscribe} from 'progressive-web-sdk/dist/store/push-messaging/selectors'

    type: boolean

    Whether the user can be subscribed to Push messaging. If this is false, it may mean the user has blocked permissions for push notifications on this site.

    getPageCount

    import {getPageCount} from 'progressive-web-sdk/dist/store/push-messaging/selectors'

    type: number

    The number of pages the user has seen, persisted over multiple visits to the site. You can use this to only show a Push messaging component after a certain number of pages have been seen, which could prove a higher level of engagement with the site.

    getStatus

    import {getStatus} from 'progressive-web-sdk/dist/store/push-messaging/selectors'

    import {MESSAGING_STATUS} from 'progressive-web-sdk/dist/store/push-messaging/constants'

    type: number

    The loading status of the Messaging feature. getStatus should always be compared to values from the MESSAGING_STATUS constants object (import instruction shown above). The MESSAGING_STATUS object has 3 values to compare against:

    MESSAGING_STATUS.LOADING // Messaging is loading
    MESSAGING_STATUS.READY // Messaging is ready to subscribe visitors
    MESSAGING_STATUS.FAILED // Messaging has failed to load
    

    Use this selector to determine whether to show a Push messaging component or not. For example, you could display a loading spinner if this selector is equal to MESSAGING_STATUS.LOADING or hide a Messaging component if this selector is equal to MESSAGING_STATUS.FAILED. See Building Your Own Opt-In Component for a detailed example which includes the use of the getStatus selector and the MESSAGING_STATUS constants object.